Javascript 如何从字符串名称呈现react组件

我想从字符串名称动态呈现react组件。 这是我所做的，但它不起作用。这能做到吗？举个例子会很有帮助

string_name是组件的名称

var MyComponent = React.createElement(window[string_name], {});
return (
      <div className="wrapper">
          <div>Hello World</div>
          <MyComponent/>
      </div>
    )

var MyComponent=React.createElement（窗口[字符串\名称]，{}）；
返回(
你好，世界
)

缺少关键位，我不知道是否在任何地方记录了它，但您需要使用JSX编译器的大写字母（？）将其重新编码为类型

import AllComponents from 'Components';

const FooType = 'Foo';

return (
    <div className="wrapper">
        <div>Hello World</div>
        <AllComponents[FooType] />
    </div>
);

那么你所要做的就是：

import AllComponents from './index.js';

const myType = 'Checkbox';
const Type = AllComponents[myType];

.. later ..
return <div><Type /></div>;

从“/index.js”导入所有组件；
const myType='复选框'；
常量类型=所有组件[myType]；
.. 以后。。
返回；

您可以做的一件事是在MyComponent中需要一个子组件，并在返回时呈现它。编写自定义函数以在子级中动态呈现组件，然后在MyComponent中需要它

var React = require('react');

var Names = React.createClass({
  render: function(){

    // Map the names and loop through
    var names = this.props.names.map(function(name, index){

        return(
            <div> 
                <li className="list-group-item" key={index}>
                  {<h4>{name[index]}</h4>}

                </li>
            </div>
        )
    });
  }
});

/*We then export the Names component*/
module.exports = Names;

var React = require('react');
var Names = require('./Names');

var MyComponent = React.createClass({
/*This will set the initial state for any state the component handles. usually empty data*/
 getInitialState: function(){
    return {

       names: ["My Component", "Your Component"]

    }
 },


 render: function(){

    return(

        <div className="row">

            <div className="col-md-4">

                <Names names={this.state.names} />

            </div>

        </div>
    );
 }
});

var React=require（'React'）；
变量名称=React.createClass({
render:function（）{
//映射名称并循环
var names=this.props.names.map（函数（名称、索引）{
返回(

{{name[index]}

)
});
}
});
/*然后我们导出名称组件*/
module.exports=名称；

下面是父组件

var React = require('react');

var Names = React.createClass({
  render: function(){

    // Map the names and loop through
    var names = this.props.names.map(function(name, index){

        return(
            <div> 
                <li className="list-group-item" key={index}>
                  {<h4>{name[index]}</h4>}

                </li>
            </div>
        )
    });
  }
});

/*We then export the Names component*/
module.exports = Names;

var React = require('react');
var Names = require('./Names');

var MyComponent = React.createClass({
/*This will set the initial state for any state the component handles. usually empty data*/
 getInitialState: function(){
    return {

       names: ["My Component", "Your Component"]

    }
 },


 render: function(){

    return(

        <div className="row">

            <div className="col-md-4">

                <Names names={this.state.names} />

            </div>

        </div>
    );
 }
});

var React=require（'React'）；
变量名称=要求（'./名称'）；
var MyComponent=React.createClass({
/*这将为组件处理的任何状态设置初始状态。通常为空数据*/
getInitialState:函数（）{
返回{
名称：[“我的组件”、“您的组件”]
}
},
render:function（）{
返回(
);
}
});

显然，您需要一份可用组件列表。我将进行编辑，以显示内联示例…但我无法手动列出所有组件。没有，因为它们需要以某种方式导入，否则您的模块加载器（使用本机、browseify或其他格式）将永远不知道如何将这些模块拉入。我再次更新了答案，以显示此的流线型版本。这是一个动态选择组件名称的工作小提琴。如果我在标记之前写一些其他html标记，它就不起作用了。好的，明白了，现在可以用了。我接受你的回答，因为这也是一种替代方法。谢谢。在映射字符串的平面数组时，h4中的name.name不是没有定义吗？下面是一个动态拾取组件名称的工作提琴。如果我在标记之前写一些其他html标记，它就不起作用了。jsfiddle.net/geetamamuni/q3zwtosw/19@GeetanjaliPanda老实说，有更实际的方法来解决这个问题。在小提琴中，您最终将向窗口渲染组件。您应该将数据作为道具从父对象传递给子对象，或从所有者传递给所有者，这是反应方式。然后，您可以编写任何自定义函数来动态显示数据。