Question

The React Tutorial有一个渲染显然返回一个渲染节点数组：

// tutorial10.js
var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.data.map(function (comment) {
      return (
        <Comment author={comment.author}>
          {comment.text}
        </Comment>
      );
    });
    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});

组件的render（）方法的可接受返回类型是什么？阵列似乎有用吗？一组数组怎么样？如果我将数据存储在代码数组数组中，我该如何适当地渲染网格？

Answer 1

您必须始终返回react组件，但该组件的内容（只要它们是有效的jsx语法）可以是一个数组，一个包含反应组件的数组数组。 E.g。

var MyComponent = React.createClass({
  render: function () {
    var single = <p>Single</p>;
    var array = [
      <p>One</p>,
      [<p>Two</p>],
      [<p>Three</p>]
    ];

    return (
      <div>
        {single}
        {array}
      </div>
    );
  }
});

React.render(<MyComponent />, document.body);

jsbin

通常，您会获取数据，对其进行迭代（无论多深层次）并生成您的组件。 Array.Map和其他＆＃34;功能性＆＃34;帮助者在这种情况下特别有用。

Answer 2

如果你查看文档，你会发现你只能从渲染中返回一个组件或null / false。

＆＃34; render（）方法是必需的。调用时，它应检查this.props和this.state以及返回a   单个子组件。这个子组件可以是虚拟的   表示本机DOM组件（例如或   React.DOM.div（））或您定义的其他复合组件   自己。

您还可以返回null或false 以表示您不想要   任何渲染。在幕后，React呈现标签   使用我们当前的差异算法。返回null或时   false，this.getDOMNode（）将返回null。＆＃34;

http://facebook.github.io/react/docs/component-specs.html

ReactJS Component.render（）函数的适当返回类型是什么？

2 个答案: