在反应中创建动态组件答案

【问题标题】：creation of Dynamic Components in react在反应中创建动态组件
【发布时间】：2017-11-07 08:48:18
【问题描述】：

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

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

【问题讨论】：

在这个Object.keys(pages.Components).length中，Object.keys的目的是什么？它是一个数组。可以直接pages.component.length

标签： javascript json reactjs

【解决方案1】：

问题：

Object.keys(pages.Components) -> 这已经是数组了，为什么还要使用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])))

【讨论】：

您可以将To代码替换为pages.Component.map(x=> `<${x}/>`)
你好，我得到了结果 classCallCheck(this, HeaderSocial); return _possibleConstructorReturn(this, (HeaderSocial.__proto_ || Object.getPrototypeOf(HeaderSocial)).apply(this, arguments)); }/>
请您为此创建一个 plnkr 吗？您是否已导入该文件中的所有组件？
我修复了它:) for (let i = 0; i
在 50 分钟内确定（新投票的时间）ty ps 你能用我的补充编辑你的答案吗？ React.createElement(pages.Components[i]))

【解决方案2】：

由于您试图创建一个字符串元素列表，因此您必须使用 dangerouslySetInnerHTML 将您操作的字符串附加到实际组件中。而不是进入一个单独的方法来进行操作，您可以使用“地图”。

这里我添加了代码以及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')
);

【讨论】：

【解决方案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 注入到您的组件中。 :)

【讨论】：