如何最好地从数据模型中动态渲染反应组件答案

【问题标题】：How to best render react components dynamically from data model如何最好地从数据模型中动态渲染反应组件
【发布时间】：2015-03-05 09:40:39
【问题描述】：

我正在尝试使用 React.JS 创建文本编辑器，它有点像 Trevor 爵士（https://madebymany.github.io/sir-trevor-js/example.html）。因此，您基本上可以订购、编辑和嵌入不同类型的内容块。

我有一个来自后端的 JSON 数据集，看起来像这样。

var content = [
    {"tag": "p", "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."},
    {"tag": "Youtube", "content": "dQw4w9WgXcQ"},
    {"tag": "ul", "content": [
        {"tag": "li", "content": "Rick"},
        {"tag": "li", "content": "Astley"},
    ]},
    {"tag": "TagCloud", "content": ["news","opinon","papers"]}
];

Youtube 和 TagCloud 是 React 类。我这样渲染代码：

var ArticleContent = React.createClass({
  render: function() {
    var elments = this.props.content;
    var reactElements = []
    for (var elementIndex in elments) {
      if (elments.hasOwnProperty(elementIndex)) {
        var tagname = elments[elementIndex].tag;
        var content = elments[elementIndex].content;
        console.log(tagname.toString());
        if(!/(div|p|li)/.test(tagname))
          tagname = React.createFactory(tagname)
        reactElements.push(React.createElement(tagname, null, content));
      }
    }

    return (
      React.createElement('div', {className: 'articleContent'},
        reactElements
      )
    );
  }
});
React.render(
  <ArticleContent content={content}></ArticleContent>
  document.getElementById('content')
);

现在我的愿望是只用 createElement 来渲染普通的 html 标签，但是对于那些与定义的 React 组件类匹配的，我想使用 components 渲染方法来渲染。

据我了解这是不可能的，因为createElement 只接受正确的 React 对象或 html 标签字符串。请帮忙:)

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

React.createElement 接受标签名称作为字符串：

创建并返回给定类型的新 ReactElement。 type 参数可以是 html 标签名称字符串（例如，'div'、'span' 等），也可以是 ReactClass（通过 React.createClass 创建）。

看看你自己的代码示例:)

React.createElement('div', {className: 'articleContent'},
  reactElements
)

您可以在相应的ReactClass 中查找自定义组件名称，并假设其他所有内容都是常规 HTML 标记。

【讨论】：