Реагировать на визуализацию HTML из родительского компонента

Question

Я столкнулся с проблемой при рендеринге. Я выполнил поиск в Интернете, но не нашел решения.

В родительском компоненте:

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

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

В дочернем компоненте:

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

Однако , div не получен. Я проверил другое решение и попытался опасно SetInner HTML, но он будет отображать строку «Заголовок», а не элемент. Могу ли я получить помощь?

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/