Question

我尝试动态地将对类的引用传递给容器并进行渲染。

    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

您可以动态更改HelloWidget组件中的状态值，这将反映在Test Component中。这是代码：

    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/

Answer 2

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

像这样：

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

检查工作fiddle。

Answer 3

在构造函数中使用Test指令在分配

时创建该组件

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

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

3 个答案: