使用 react.cloneElement 渲染简单的 HTML

Question

React.cloneElement() 总是需要第一个参数作为反应组件，它应该作为道具中的子项传递。

有没有办法将一个简单的 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

详细说明为什么您的小提琴没有按预期工作。

请参阅此处的代码：

{this.props.show && React.cloneElement(this.props.children, {
    contentStyle: {
        color:'red'
    }
})}

问题是在像CCC这样的自定义组件的情况下， contentStyle将作为道具传递，并且您正在像这样使用它：

style={this.props.contentStyle}

这意味着最终样式将应用于 div 而不是 contentStyle。 但是在div情况下， contentStyle将被应用并且不会改变任何东西，因为div期望style而不是contentStyle 。

为了解决您的问题，在所有地方将contentStyle重命名为style 。

检查这个工作小提琴。

Answer 2

可以描述答案的最佳链接在这里：

https://reactjs.org/warnings/unknown-prop.html

如果您尝试使用 React 未识别为合法 DOM 属性/属性的 prop 来渲染 DOM 元素，则会触发 unknown-prop 警告。 你应该确保你的 DOM 元素没有浮动的虚假道具。

为了修复它，我们应该在渲染之前拆分道具。 喜欢：

render(){
const {children, addCustomProps, ...props} = this.props;
  return(<div {...props}>{children}</div>);
}

为了避免警告，我们应该只将那些 props 传递给 DOM ，它们可以被识别为 HTML 属性或 React 属性，如 className。