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) - ＆gt;这已经是数组了，为什么你使用Object.keys()？

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

更改循环

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])))

Answer 2

由于您正在尝试创建字符串元素列表，因此必须使用dangerouslySetInnerHTML将您操作的字符串附加到实际组件。而不是采用单独的方法来进行操作，您可以使用地图＆＃39;。

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

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')
);

Answer 3

如果您不介意使用不同的方法，请改为从字符串数组更改为函数数组。

由于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 JSXComponent = ({ num }) => (
  <div>{arr.map(jsx => jsx({ num }))</div>
)
JSXComponent({ num: 1 })  // 1 2

您甚至可以将...props注入您的组件。：）

在反应中创建动态组件

3 个答案: