从父组件反应渲染 HTML

Question

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

在父组件中：

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

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

在子组件中：

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

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

Answer 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/