如何在没有JSX的情况下渲染多个子级 [英] how to render multiple children without JSX

问题描述

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

How to write this without using 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

This comes from the react.js tutorial: http://facebook.github.io/react/docs/tutorial.html

我知道我可以执行以下操作:

I know I can do the following:

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

但这只会添加一个元素.我该如何彼此相邻添加更多内容.

But this only adds one element. How can I add more next to one another.

推荐答案

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

You can use the online Babel REPL (https://babeljs.io/repl/) as a quick way to convert little chunks of JSX to the equivalent 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转换的编译器输出也很方便.

It's also handy for checking what the transpiler outputs for the ES6 transforms it supports.

这篇关于如何在没有JSX的情况下渲染多个子级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！