如何在没有 JSX 的情况下渲染多个孩子答案

【问题标题】：how to render multiple children without JSX如何在没有 JSX 的情况下渲染多个孩子
【发布时间】：2020-08-11 09:32:17
【问题描述】：

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

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

【问题讨论】：

标签： javascript reactjs

【解决方案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 转换它支持的内容也很方便。

【讨论】：

【解决方案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，您可以通过解构赋值使其不那么冗长。有关使用 6to5 而不是 jsx 的交互式示例，请参阅此 jsbin。

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;
    }

【讨论】：

非常感谢分享这个.apply 方法我一直收到"Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of ToolbarButton. See https://fb.me/react-warning-keys for more information." react.dev.js:18780:9 的警告，这就是修复它的原因。我不关心和解，只是希望 react.js 开发版本中的警告关闭哈哈

【解决方案4】：

您只需将它们作为子组件一个接一个地添加到您的父组件中，

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

【讨论】：

【解决方案5】：

我遇到了这个问题，通过解释器源代码单步解决需要一段时间：

var arrayOfData = [];
var buildArray = (function () {
    var id;
    var name;
    return{
        buildProc(index, oneName){

                id =  index;
                name =  oneName;
                arrayOfData[index] = (React.createElement('Option', {id},name));
        }
    }
})();
// then 
this.state.items = result;
var response = parseJson.parseStart(this.state.items);
var serverDims = response.split(":");
for (var i = 1; i < serverDims.length; i++) {
    buildArray.buildProc(i, serverDims[i] )
}

// then
 render(){
    const data = this.props.arrayOfData;

    return (
        React.createElement("select", {},
               data
        )
    // {data} Failed with "object not a valid React child,  data with no curly's worked

    )          
}

【讨论】：