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

Question

我正在尝试使用 React.JS 创建文本编辑器，它的工作方式有点像特雷弗爵士 (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 组件的标签 Class，我想使用组件渲染方法渲染。

据我所知，这是不可能的，因为 createElement 只接受适当的 React 对象或 html 标签的字符串。请帮助:)

Answer 1

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

Create and return a new ReactElement of the given type. The type argument can be either an html tag name string (eg. 'div', 'span', etc), or a ReactClass (created via React.createClass).

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

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

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

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

How to best render react components dynamically from data model

javascript

reactjs