如何在没有JSX的情况下渲染多个子级

小编典典

如何在没有JSX的情况下渲染多个子级

reactjs

不使用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")
)

但这仅增加了一个要素。如何添加更多彼此相邻的内容。

阅读 241

2020-07-22

共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转换的编译器输出也很方便。

2020-07-22