React.cloneElement() 总是需要第一个参数作为 react 组件,它应该作为 Prop 中的 child 传递。
有没有办法将一个简单的 HTML 节点作为子节点传递。请引用下面的代码以便更好地理解我的问题:
Dialog.jsx(通用组件):
return (
<div className="app-dialog-jsx" ref={(ele) => this.ele = ele}>
{this.state.show && React.cloneElement(this.props.children, {
contentStyle: {
height: 400,
overflowY: 'auto',
overflowX: 'hidden'
},
method1: this. method1,
method2: this. method2
})}
</div>
);
现在我不能通过:
<Dialog
ref={(dialog)=>this.dialog=dialog}
method1={()=>console.log(1)}
method2 ={()=>console.log(1)}
>
<h4>somethign</h4>
</Dialog>
H4 需要是一个 React 组件,否则它不会在 cloneElement 中设置 props。我怎样才能在这里发送简单的 HTML,有什么帮助吗?
最佳答案
关于原因的详细信息 your fiddle没有按预期工作。
请看这里的代码:
{this.props.show && React.cloneElement(this.props.children, {
contentStyle: {
color:'red'
}
})}
问题是在自定义组件的情况下,如 CCC
, contentStyle
将作为 props 传递,你正在这样使用它:
style={this.props.contentStyle}
这意味着最后样式将应用于 div 而不是 contentStyle。但在 div
的情况下, contentStyle
将被应用并且不会改变任何东西,因为 div
期待 style
不是contentStyle
.
要解决您的问题,请重命名 contentStyle
至 style
在所有地方。
检查这个 working fiddle 强>。
关于javascript - 使用 react.cloneElement 渲染简单的 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48921725/