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

Mark Qian

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

    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/

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

有什么建议吗?

谢谢

马扬克·舒克拉

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

像这样:

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

检查工作小提琴

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在React中渲染另一个组件

来自分类Dev

在react中动态添加另一个组件

来自分类Dev

React 组件可以渲染存储在其状态中的另一个组件吗?

来自分类Dev

React – 如何在另一个已安装的组件中渲染附加组件?

来自分类Dev

如何在React中从另一个组件设置一个组件的状态

来自分类Dev

如何将对象从数组渲染到React中的另一个组件?

来自分类Dev

在React.Js中创建一个组件作为另一个组件的子组件

来自分类Dev

渲染多个同一个 React 组件,哪个可以渲染多个另一个组件?

来自分类Dev

通过React中的父组件在另一个组件中触发动作

来自分类Dev

在Flux中,一个React组件中的动作影响另一个组件的合适方法是什么?

来自分类Dev

React-如何将API数据从一个组件传递到另一个js文件中的另一个组件?

来自分类常见问题

React.js:将一个组件包装到另一个组件中

来自分类Dev

如何在React Native中从另一个功能组件更改一个功能组件的状态?

来自分类Dev

修改React.js中另一个组件中一个组件的HTML元素

来自分类Dev

修改React.js中另一个组件中一个组件的HTML元素

来自分类Dev

修改React.js中另一个组件中一个组件的HTML元素

来自分类Dev

React Native将Text组件添加到另一个Text组件中

来自分类Dev

将TypeScript React组件嵌套在另一个组件中

来自分类Dev

单击另一个组件中的按钮时,如何显示/隐藏React组件?

来自分类Dev

如何通过在React中单击另一个组件来删除组件?

来自分类Dev

React Native将Text组件添加到另一个Text组件中

来自分类Dev

当另一个组件的子组件的状态在 react 中改变时触发事件

来自分类Dev

React:在另一个组件中使用组件

来自分类Dev

渲染在另一个组件的render函数中声明的组件时,不包括REACT 17中componentDidMount方法中的更改

来自分类Dev

React组件中另一个文件中的React JS调用函数

来自分类Dev

如何在React.js中从一个组件(子组件)到另一个组件(父组件)获取值?

来自分类Dev

如何在React组件中的另一个函数中访问useEffect的异步数据

来自分类Dev

另一个React组件中的新React模块

来自分类Dev

另一个React组件中的新React模块

Related 相关文章

  1. 1

    在React中渲染另一个组件

  2. 2

    在react中动态添加另一个组件

  3. 3

    React 组件可以渲染存储在其状态中的另一个组件吗?

  4. 4

    React – 如何在另一个已安装的组件中渲染附加组件?

  5. 5

    如何在React中从另一个组件设置一个组件的状态

  6. 6

    如何将对象从数组渲染到React中的另一个组件?

  7. 7

    在React.Js中创建一个组件作为另一个组件的子组件

  8. 8

    渲染多个同一个 React 组件,哪个可以渲染多个另一个组件?

  9. 9

    通过React中的父组件在另一个组件中触发动作

  10. 10

    在Flux中,一个React组件中的动作影响另一个组件的合适方法是什么?

  11. 11

    React-如何将API数据从一个组件传递到另一个js文件中的另一个组件?

  12. 12

    React.js:将一个组件包装到另一个组件中

  13. 13

    如何在React Native中从另一个功能组件更改一个功能组件的状态?

  14. 14

    修改React.js中另一个组件中一个组件的HTML元素

  15. 15

    修改React.js中另一个组件中一个组件的HTML元素

  16. 16

    修改React.js中另一个组件中一个组件的HTML元素

  17. 17

    React Native将Text组件添加到另一个Text组件中

  18. 18

    将TypeScript React组件嵌套在另一个组件中

  19. 19

    单击另一个组件中的按钮时,如何显示/隐藏React组件?

  20. 20

    如何通过在React中单击另一个组件来删除组件?

  21. 21

    React Native将Text组件添加到另一个Text组件中

  22. 22

    当另一个组件的子组件的状态在 react 中改变时触发事件

  23. 23

    React:在另一个组件中使用组件

  24. 24

    渲染在另一个组件的render函数中声明的组件时,不包括REACT 17中componentDidMount方法中的更改

  25. 25

    React组件中另一个文件中的React JS调用函数

  26. 26

    如何在React.js中从一个组件(子组件)到另一个组件(父组件)获取值?

  27. 27

    如何在React组件中的另一个函数中访问useEffect的异步数据

  28. 28

    另一个React组件中的新React模块

  29. 29

    另一个React组件中的新React模块

热门标签

归档