Javascript 动态创建react组件

尝试根据随数据传递的参数呈现不同的组件。 如果我使用regular或React.createElement（Item）-它工作正常，但所有其他选项都失败

var React=window.React；
变量数据={项：[
{itemClass:'Item'，id:1，contentsHTML:''，text:'Item 1'}，
{itemClass:'Item'，id:2，contentsHTML:''，text:'Item 2'}，
{itemClass:'Item'，id:3，contentsHTML:''，text:'Item 3'}，
{itemClass:'Item'，id:4，contentsHTML:''，text:'Item 4'}，
{itemClass:'Item'，id:5，contentsHTML:''，text:'Item 5'}
]};
var MyCatalog=React.createClass({
getInitialState:函数（）{
返回{data:{items:[]}；
},
componentDidMount:函数（）{
this.setState（{data:this.props.data}）；
},
渲染：函数（）{
返回(
你好！！！我是一个目录！！！
);
}
});
var ItemList=React.createClass({
渲染：函数（）{
console.log（this.props）；
var items=this.props.data[“items”].map（函数（itemData）{
var klass=itemData['itemClass']| |'Item'；
var ItemFactory=React.createFactory（klass）；
//返回//否
//返回//否
//return React.createElement（klass，{key:itemData['id']，data:itemData}）；//否
//返回//确定
//返回React.createElement（项，{data:itemData}）；//确定
//return React.createElement（'Item'，{key:itemData['id']，data:itemData}）；//否
//返回React.createElement（React.createFactory（'Item'），{data:itemData}）；//否，错误
var component=组件['itemClass']；
返回
});
控制台日志（项目）；
返回(
React.createElement（'div'，{className:'list'}，
React.createElement（'div'，null'，并且我是一个ItemList:'），
React.createElement（'div'，null，items）
)
/*
我是一个项目列表：
{items}
*/
);
}
});
var Item=window.Item=React.createClass({
渲染：函数（）{
返回(
普通的，没什么特别的。
{this.props.children}
);
}
});
变量组件={'Item'：Item}；
反应。呈现（
, 
document.getElementById（'app'）
);

如何为不同类型的组件管理此案例？

这应该可以：

var component = Components[itemData['itemClass']]);
return React.createElement(component, {
    data: itemData,
    key: itemData['id']
});

您不能像这样使用JSX语法，因为当它被传输时，组件不会引用任何东西

更新：以下是完整更新的ItemList组件：

var ItemList = React.createClass({
    render: function() {
        console.log(this.props);

        var items = this.props.data["items"].map(function(itemData) {
            var component = Components[itemData['itemClass']];
            return React.createElement(component, {
                data: itemData,
                key: itemData['id']
            });
        });
        console.log(items);
        return (
            <div className="list">
                <div>And I am an ItemList</div>
                <div>{items}</div>
            </div>
        );
    }
});

var ItemList=React.createClass({
render:function（）{
console.log（this.props）；
var items=this.props.data[“items”].map（函数（itemData）{
var component=Components[itemData['itemClass']]；
返回React.createElement（组件{
数据：itemData，
关键字：itemData['id']
});
});
控制台日志（项目）；
返回(
我是一个项目列表
{items}
);
}
});

---

你可以从这把小提琴中看到它的作用：

公认的答案并不完全准确，而且过于复杂

您不能像这样使用JSX语法，因为当它被传输时，组件不会引用任何东西

只需将变量名大写，即可避免这种情况

const component = ({ChildClass}) => {
    return <ChildClass />
}

const组件=（{ChildClass}）=>{
返回
}

是什么阻止您在

项目列表中使用JSX表示法呢？

当您说“作为数据传递”时，您的意思是否与this.props相同。{propertyName]值？为什么不继续使用this.props.children并将它们作为子节点传递进来？这毕竟是一个属性。或者定义一些可能的组件类型，然后返回一个变量，该变量在swicth@E_net4正如您所见，我也使用了JSX，但它不起作用。它应该起作用吗？我尝试过这种变体，但它不起作用不起作用，您可以看到注释代码从第行开始44@Dmitry它工作正常，请参阅更新。我认为您的问题是您使用的是

组件['itemClass']

而不是

组件[itemData['itemClass']]

请注意，每次都会调用每个屏幕的构造函数。

const component = ({ChildClass}) => {
    return <ChildClass />
}