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

Posted 2023-02-23

【中文标题】警告：未知的事件处理程序属性“onHeaderClick”。会被忽略

【英文标题】：Warning: Unknown event handler property `onHeaderClick`. It will be ignored

【发布时间】：2019-05-25 11:55:41

【问题描述】：

我正在创建高阶组件，以便将一些道具与另一个组件一起传递。但收到未知事件处理程序属性的警告。

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

【参考方案1】：

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

【参考方案2】：

error 有据可查：

如果您尝试渲染 DOM，将触发 unknown-prop 警告 带有一个未被 React 识别为合法 DOM 的 prop 的元素 属性/属性。你应该确保你的 DOM 元素不 有虚假的道具漂浮在周围。

【讨论】：

感谢您的建议。我已经探索过“未知道具警告”。但问题是我只是将动作作为道具传递并没有什么不同。你可以看到。

TableHeaderRowBase 的渲染中有什么？也许它包含一个 DOM 元素，其中一些道具被显式设置或解构 ...this.props