从父组件 React 渲染 HTML答案

【问题标题】：React render HTML from parent component从父组件 React 渲染 HTML
【发布时间】：2020-04-28 00:10:06
【问题描述】：

我在渲染中遇到了问题。我在网上搜索了一些，但没有找到解决方案。

在父组件中：

<Child prop1={this.getHeader()}>

getHeader() : function () {
  return (<div> Header </div>)
}

在子组件中：

render() : function () {
  return (<div> {this.props.prop1} </div>)
}

但是，div 没有被渲染。我检查了其他解决方案并尝试了危险的SetInnerHTML，但它会呈现“ Header ”的字符串而不是元素。我能得到一些帮助吗？

【问题讨论】：

那些代码 sn-ps 是无效的 ReactJs，而且，您的渲染函数正在返回另一个函数，而不仅仅是 JSX。

标签： javascript html reactjs

【解决方案1】：

这是一个可行的解决方案：

class Parent extends React.Component {
  getHeader() {
    return <div> Header </div>;
  }

  render() {
    return <Child prop1={this.getHeader()} />;
  }
}

class Child extends React.Component {
  render() {
    return <div> {this.props.prop1} </div>;
  }
}

ReactDOM.render(<Parent />, document.querySelector('#app'));

https://jsfiddle.net/u5m29cw1/6/

【讨论】：

谢谢。我可以知道它为什么有效吗？我还是不明白我有什么问题。
这毫无意义：getHeader() : function () {...}。我改变了你声明函数的方式，就是这样。如果您觉得有帮助，请将答案标记为接受。