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

Question

我尝试将对 class 的引用动态传递给容器并呈现它。

    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/

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

有什么建议吗？

谢谢

Answer 1

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

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

Answer 2

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

像这样：

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

检查工作fiddle。

Answer 3

您可以动态更改 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'));

这是一个有效的 fiddle link：https://jsfiddle.net/jayesh24/1uvpg5ej/

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

Dynamically render a component inside a another component in React

render

reactjs