我有一个ModifyWordPartButton
具有 stateisHovered
和 child的组件IconButton
。IconButton
onclick
那是另一个组件的子组件,SelectWordPartToModify
,它有一个方法handleClickOpen()
。IconButton
应该能够拥有它的onClick
= 。SelectWordPartToModify
handleClickOpen()
使用此代码时:
ModifyWordPartButton
:
.
.
.
render() {
return (
<div>
<IconButton className={this.state.isHovered ? 'hoveredClass' : null />
</div>
);
}
SelectWordPartToModify
:
.
.
.
render() {
<ModifyWordPartButton />
}
导致IconButton
继承ModifyWordPartButton
的isHovered
状态而不是继承SelectWordPartToModify
的状态handleClickOpen()
。
当我使用此代码时
ModifyWordPartButton
:
.
.
.
render() {
return (
<div>
{this.children}
</div>
);
}
SelectWordPartToModify
:
.
.
.
render() {
<ModifyWordPartButton onClick={this.handleClickOpen}>
<IconButton onClick={this.handleClickOpen}
</ModifyWordPartButton
}
IconButton
不继承ModifyWordPartButton
的isHovered
状态。
我尝试用ModifyWordPartButton
'srender()
替换this.props.children
:
this.props.children.map(
child => {
React.cloneElement(child, this.state)
}
)
但是 React 给了我一个关于不识别IconButton
'isHovered
属性的错误。
这是我使用的完整代码: https ://codesandbox.io/s/zwlz41mo93?codemirror=1&eslint=1&fontsize=14
我该如何解决这个问题?