Question

我试图使用React.JS创建texteditor，其工作方式有点像Sir 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组件Class的人，我想使用组件渲染方法进行渲染。

据我所知，这是不可能的，因为createElement只接受正确的React对象或html标签字符串。请帮助：）

Answer 1

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

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

查看您自己的代码示例：）

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

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

如何从数据模型中动态地动态反应组件

1 个答案: