使用 react.cloneElement 渲染简单的 HTML答案

【问题标题】：render simple HTML with react.cloneElement使用 react.cloneElement 渲染简单的 HTML
【发布时间】：2018-08-01 23:13:25
【问题描述】：

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 需要是一个 react 组件，否则它不会在 cloneElement 中设置 props。我怎样才能在这里发送简单的 HTML，有什么帮助吗？

【问题讨论】：

有什么问题？它应该工作。检查working fiddle。如果我遗漏了什么，请告诉我。
您可以在这里查看jsfiddle.net/pk1t65Lu/17。我已经修改了
是的，这应该可以。
在 JSX 中使用时是一个 React 元素。
但是 test1 没有渲染道具。我想要简单的 HTML 来呈现道具。这就是问题所在。

标签： javascript reactjs

【解决方案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。

【讨论】：

SO，你的意思是说，我们不能将自定义道具传递给普通的 HTML 吗？它必须是 HTML 的有效属性。
您可以传递自定义道具，它们将在元素上可用，但它们将如何工作？如果是自定义组件，请查看您正在使用它们style={this.props.contentStyle} 表示您正在传递contentStyle，但最后使用style，样式将被应用，但如果是html，谁将为您完成这项工作:)跨度>
检查这个小提琴，这里我们传递contentStyle，最后使用style（检查div）。 check fiddle
非常感谢您的解释。 :)
呵呵，用文字解释这样的事情，很难，很高兴我做到了:)

【解决方案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。

【讨论】：