我正在创建高阶组件传递一些 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
。它将被忽略。)
3条答案
按热度按时间hsgswve41#
当你传递一个名称以
on
开头的prop时,不管大小写如何,都会发生这种情况。React假设并尝试将其绑定到onClick、onKeypress等javascript事件wd2eg0qa2#
error有详细的文档记录:
如果您试图使用React无法识别为法律的DOM属性/特性的prop来呈现DOM元素,则会触发unknown-prop警告。您应该确保DOM元素周围没有虚假的prop。
j8ag8udp3#
在另一篇文章中找到了正确答案。https://stackoverflow.com/a/50196327/1734744问题是使用{... props}将 prop 从父级传递到子级,这可能会无意中将父级的事件处理程序传递给子级。
还有,我正在将{... props}传递给一个div(子组件的容器),而我的自定义事件处理程序没有被div(原生HTML标记)识别
希望这个有用。