Question

React.cloneElement（）总是需要第一个参数作为反应组件，它应该作为子句在props中传递。

是否有办法将简单的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需要是反应组件，否则它不会在cloneElement中设置props。如何在这里发送简单的HTML，任何帮助？

Answer 1

详细说明your fiddle无法正常工作的原因。

请参阅此处的代码：

{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。

选中 working fiddle 。

Answer 2

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

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

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

要修复它，我们应该在渲染之前拆分道具。像：

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

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

使用react.cloneElement呈现简单的HTML

2 个答案: