javascript - 如何在没有 JSX 的情况下渲染多个 child

Question

如何在不使用 JSX 的情况下编写此代码？

 var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList />
        <CommentForm />
      </div>
    );
  }
});

这来自 react.js 教程:http://facebook.github.io/react/docs/tutorial.html

我知道我可以做到以下几点:

return (
   React.createElement('div', { className: "commentBox" },
        React.createElement('h1', {}, "Comments")
)

但这只是增加了一个元素。我怎样才能一个接一个地添加更多。

Answer 1

您可以使用在线Babel REPL ( https://babeljs.io/repl/ ) 作为将小块 JSX 转换为等效 JavaScript 的快速方法。

var CommentBox = React.createClass({displayName: 'CommentBox',
  render: function() {
    return (
      React.createElement("div", {className: "commentBox"}, 
        React.createElement("h1", null, "Comments"), 
        React.createElement(CommentList, null), 
        React.createElement(CommentForm, null)
      )
    );
  }
});

它也可以方便地检查它支持的 ES6 转换的转译器输出。