在 React 中动态渲染另一个组件内的组件答案

【问题标题】：Dynamically render a component inside a another component in React在 React 中动态渲染另一个组件内的组件
【发布时间】：2017-05-17 05:56:26
【问题描述】：

我试图动态地将一个类的引用传递给一个容器并渲染它。

    class Test extends React.Component{
        render() {
           return <div>Test</div>
        }
    }

    class HelloWidget extends React.Component{
           constructor(props) {
              super(props);

              this.state = {
                  child: Test
              };
           }

           render() {
               return <div>{this.state.child}</div>;
          }
    }

    React.render(<HelloWidget />, document.getElementById('container'));

在 jsfiddle 上查看：https://jsfiddle.net/coolshare/jwm6k66c/2720/

它没有渲染任何东西......

有什么建议吗？

谢谢

【问题讨论】：

标签： reactjs render

【解决方案1】：

您可以动态更改 HelloWidget 组件中的状态值，这将反映在测试组件中。代码如下：

    class Test extends React.Component{

            render() {
        return <div>{this.props.child}</div>
    }
        }
  class HelloWidget extends React.Component{
    constructor(props) {
      super(props);

      this.state = {
            child: "Test"
      };
    }

    render() {
        return <div>
            <Test child={this.state.child}/>
        </div>;
    }
  }

  React.render(<HelloWidget />, document.getElementById('container'));

这是一个有效的小提琴链接：https://jsfiddle.net/jayesh24/1uvpg5ej/

【讨论】：

【解决方案2】：

您需要使用React.createElement 来创建新的反应元素。

像这样：

render() {
    return <div>hello {React.createElement(this.state.child)}</div>;
}

检查工作的fiddle。

【讨论】：

@MarkQian 如果您觉得答案有用，请将其标记为正确。

【解决方案3】：

在分配时使用构造函数中的测试指令来创建该组件

      this.state = {
            child: <Test />
      };

【讨论】：