javascript - 在 react 中创建动态组件

Question

我想从 json 创建一个动态组件， 有什么想法吗？

目前我尝试像这样生成它们

 getMenu(){
  var pages  = {
        name : "Parcs",
        title : "Bienvenue sur la parc toto",
        Components : [
            "HeaderSocial",
            "HeaderFull",
            "Menu",
            "ParcsSlider",
            "TabMenu",
            "Footer"
        ],
    }

    var panel = [];
    var tmp;


    for (let i = 0; i <Object.keys(pages.Components).length; i++){

        tmp = Object(pages.Components)[i];
        panel.push('<' +  {tmp} + "/>");
    }
    console.log(panel)
    return (panel);
}

这个例子失败了......有什么想法吗？

Answer 1

问题:

Object.keys(pages.Components) -> 这已经是数组了，为什么要使用 Object.keys() ？

'<' + {tmp} + "/>" ，这应该是'<' + tmp + "/>"

更改for循环

for (let i = 0; i <Object.keys(pages.Components).length; i++){
    tmp = Object(pages.Components)[i];
    panel.push('<' +  {tmp} + "/>");
}

至

for (let i = 0; i < pages.Components.length; i++){
    panel.push(React.createElement(pages.Components[i])));
}

或者简单地(正如 @Rajesh 在评论中建议的那样)

return pages.Component.map(x=> React.createElement(pages.Components[i])))