reactjs 警告:未知的事件处理程序属性“onHeaderClick”,它将被忽略

5tmbdcev  于 2023-02-04  发布在  React
关注(0)|答案(3)|浏览(133)

我正在创建高阶组件传递一些 prop 与另一个组件。但得到未知的事件处理程序属性的警告。

export class TableHeaderRow extends React.PureComponent{
     render() {
            const customCell = WrappedCellComponent(Cell,this.props.onHeaderClick, this.props.isMasterChecked, this.props.onTableCheckBoxselection);
            return (
                  <TableHeaderRowBase
                        cellComponent={customCell}
                        rowComponent={Row}
                        contentComponent={Content}
                        titleComponent={Title}
                        showSortingControls={true}
                        sortLabelComponent={this.props.sortLabelComponent}
                        groupButtonComponent={(data: any) : any => null}
                        showGroupingControls={false}
                        {...this.props}
                    />
            )
        }
    }

const WrappedCellComponent = (WrappedComponent, onHeaderClick,checkIfMasterChecked, onTableCheckBoxSelection) => {

    class HOC extends React.Component {
        render() {
            return <WrappedComponent 
                    {...this.props}  
                    onHeaderClick={onHeaderClick} 
                    onTableCheckBoxSelection={onTableCheckBoxSelection}  
                    checkIfMasterChecked={checkIfMasterChecked} 
                   />;

        }
    }
    return HOC;
};

事件正常工作,但我在chrome devTool中遇到错误(即警告:未知的事件处理程序属性onTableCheckBoxSelection。它将被忽略。)

hsgswve4

hsgswve41#

当你传递一个名称以on开头的prop时,不管大小写如何,都会发生这种情况。React假设并尝试将其绑定到onClick、onKeypress等javascript事件

wd2eg0qa

wd2eg0qa2#

error有详细的文档记录:
如果您试图使用React无法识别为法律的DOM属性/特性的prop来呈现DOM元素,则会触发unknown-prop警告。您应该确保DOM元素周围没有虚假的prop。

j8ag8udp

j8ag8udp3#

在另一篇文章中找到了正确答案。https://stackoverflow.com/a/50196327/1734744问题是使用{... props}将 prop 从父级传递到子级,这可能会无意中将父级的事件处理程序传递给子级。
还有,我正在将{... props}传递给一个div(子组件的容器),而我的自定义事件处理程序没有被div(原生HTML标记)识别
希望这个有用。

相关问题