javascript - 使用 react.cloneElement 渲染简单的 HTML

Question

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，有什么帮助吗？

Answer 1

关于原因的详细信息 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 。