Javascript 在react中创建动态组件

我想在react from 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);
}

getMenu（）{
变量页={
名称：“Parcs”，
标题：“托托公园附近的Bienvenue”，
组成部分：[
“校长社交”，
“人头袋”，
“菜单”，
“滑雪者”，
“TabMenu”，
“页脚”
],
}
var面板=[]；
var-tmp；
对于（假设i=0；i问题：

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

”由于您试图创建字符串元素列表，因此必须使用危险的LySetinerHTML将您操作的字符串附加到实际组件。您可以使用“映射”，而不是使用单独的方法进行操作

在这里，我添加了代码和。但是有更好的方法可以使用条件呈现在组件内实现这种动态行为

class Hello extends React.Component {
   constructor(props) {
      super(props);
      this.state= {
         pages: {
           name : "Parcs",
           title : "Bienvenue sur la parc toto",
           components : [
             "div",
             "span",
             "p",
             "i"
           ],
         }
      };
  }
  render() {
    return (
        <div dangerouslySetInnerHTML={
            {
                __html: this.state.pages.components.map((item, i) => {
                        return '<' + item + '>' +  'test data' + '</' + item + '>';  
            })
        }
     }></div>
    );
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

类Hello扩展了React.Component{
建造师（道具）{
超级（道具）；
此。状态={
页码：{
名称：“Parcs”，
标题：“托托公园附近的Bienvenue”，
组成部分：[
“div”，
“跨度”，
“p”，
“我”
],
}
};
}
render（）{
返回(
{
返回“+”测试数据“+”；
})
}
}>
);
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);
如果您不介意使用不同的方法，请将字符串数组改为函数数组

因为React JSX可以创建为功能组件，所以可以将其作为普通函数调用

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

你可以这样称呼它

page.Components.map(jsx => jsx({ ...props }))

例如：

const x = ({ num }) => <span>{num} </span>
const y = ({ num }) => <span>{num + 1}</span>
const arr = [x, y]

const x=（{num}）=>{num}
常量y=（{num}）=>{num+1}
常数arr=[x，y]

然后

constjsxcomponent=（{num}）=>(
{arr.map（jsx=>jsx（{num}））
)
JSXComponent（{num:1}）//12

您甚至可以将
…道具
注入组件。
在这个
对象.keys（pages.components.length
中，
对象.keys
的目的是什么？它是一个数组。您可以直接执行
pages.component.length
您可以替换为
pages.component.map（x=>`）
您好，我得到了一个结果。您能为此创建一个plnkr吗？您导入了该文件中的所有组件吗？我修复了：）与for（让i=0；ivar pages  = {
        name : "Parcs",
        title : "Bienvenue sur la parc toto",
        Components : [
            HeaderSocial,
            HeaderFull,
            Menu,
            ParcsSlider,
            TabMenu,
            Footer
        ],
    }

page.Components.map(jsx => jsx({ ...props }))

const x = ({ num }) => <span>{num} </span>
const y = ({ num }) => <span>{num + 1}</span>
const arr = [x, y]

const JSXComponent = ({ num }) => (
  <div>{arr.map(jsx => jsx({ num }))</div>
)
JSXComponent({ num: 1 })  // 1 2