как сделать несколько дочерних без JSX

Как написать это без использования JSX?

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

Это происходит из учебника по реакции. Js: http://facebook.github.io/react/docs/tutorial.html

Я знаю, что могу сделать следующее:

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

Но это добавляет только один элемент. Как я могу добавить несколько рядом друг с другом.

Ответ 1

Вы можете использовать онлайн- компилятор JSX как быстрый способ конвертировать небольшие фрагменты 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 поддерживают.

Ответ 2

insin ответ - прямой перевод, однако вы можете предпочесть использовать фабрики.

var div = React.createFactory('div'), h1 = React.createFactory('h1');

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

createFactory по существу частично применяется createElement. Итак, следующие эквиваленты:

React.createElement(c, props, child1, child2);
React.createFactory(c)(props, child1, child2);

Если вы просто используете es6, но не любите JSX, вы можете сделать его менее подробным с назначением деструктуризации. См. Этот jsbin для интерактивного примера с использованием 6to5 вместо jsx.

var [div, h1, commentForm, commentList] = [
    'div', 'h1', CommentForm, CommentList
].map(React.createFactory);

Ответ 3

если у вас есть переменное число детей, вы можете использовать это: использовать функцию apply, которая принимает массив параметров.

React.createElement.apply(this, ['tbody', {your setting}].concat(this.renderLineList()))

где renderLineList, например:

renderLineList: function() {
        var data=this.props.data;
        var lineList=[];
        data.map(function(line) {
            lineList.push(React.createElement('tr', {your setting}));
        });
        return lineList;
    }

Ответ 4

Вы просто добавляете их один за другим в качестве детей в свой родительский компонент,

return React.createElement("div", null, 
      React.createElement(CommentList, null), 
      React.createElement(CommentForm, null)
    );