警告：未知的事件处理程序属性 `onHeaderClick`。会被忽略

Question

我正在创建高阶组件，用于通过另一个组件传递一些道具。但是收到未知事件处理程序属性的警告。

 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。它将被忽略。）

Answer 1

这基本上发生在您传递名称以 开头的道具时on，无论大小写。React 假设并尝试将其与 onClick、onKeypress 等 javascript 事件绑定

Answer 2

该错误有据可查：

如果您尝试使用 React 未识别为合法 DOM 属性/属性的 prop 来渲染 DOM 元素，则会触发 unknown-prop 警告。你应该确保你的 DOM 元素没有浮动的虚假道具。

Answer 3

在另一个帖子里找到了正确答案。 /sf/answers/3513742921/ 问题在于使用 {...props} 将道具从父级传递给子级，这可能会无意中将父级的事件处理程序传递给子级。

另外，我将 {...props} 传递给 div （子组件的容器），而 div （原生 html 标签）无法识别我的自定义事件处理程序

希望这可以帮助。