Question

所以我试图让这个Section课程有一个标题和不同数量的段落。

export default class Section extends React.Component {
  render() {
    return(
      <article>
        <header>
          <h1>
            { this.props.title }
          </h1>
        </header>

        {
          for (i = 0; i < (this.props.text).length; i++) {
            <Paragraph text=this.props.text[i] />
          }
        }
      </article>
    );
  }
}

你可以告诉我在这里尝试做什么。问题是这个在语法上是错误的（显然），我找不到任何关于如何正确执行此类操作的信息（请记住，我还需要具有前面的<article>元素）。

有人可以提出解决方案吗？任何其他信息/提示/链接也将不胜感激。

更新现在我有这样的事情。它似乎仍然无法使组件正确。

export default class Section extends React.Component {
  render() {
    return(
      <article>
        <header>
          <h1>
            { this.props.title }
          </h1>
        </header>


        // The updated block
        {
            this.props.text.map(
              function(t) {
                return (<Paragraph text=t />);
              }
            );
        }

      </article>
    );
  }
}

Answer 1

您可以在documentation中找到一个很好的例子：

  render: function() {
    var results = this.props.results;
    return (
      <ol>
        {results.map(function(result) {
          return <li key={result.id}>{result.text}</li>;
        })}
      </ol>
    );
  }

正如您所看到的，他们在这里使用the React Docs将转换他们的动态元素转换为React组件数组，然后立即插入整个事物，而不是使用for循环尝试一次插入一个。

还要注意子元素的key参数; React能够唯一地识别每个孩子的有效更新，这一点非常重要。

修改该示例以适合您的情况，我们可以获得如下内容：

export default class Section extends React.Component {
  render() {
    return(
      <article>
        <header>
          <h1>
            { this.props.title }
          </h1>
        </header>

        {this.props.text.map(function (text, i) {
          return <Paragraph text=text key=i />
        })}
      </article>
    );
  }
}

Answer 2

你真的很接近，这是来自反应教程，它使用React.createClass，但你可以轻松地修改它：

- 您应该将数组的循环移到上面的位置 - 您应该使用this.props.map（数据特定于示例）来返回Paragraph组件。

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

https://facebook.github.io/react/docs/tutorial.html

Answer 3

好的，更新的代码确实有效，但它需要在t本地附近使用一对花括号。

工作代码如下：

export default class Section extends React.Component {
  render() {
    return(
      <article>
        <header>
          <h1>
            { this.props.title }
          </h1>
        </header>


        {
            this.props.text.map(
              function(t) {
                return (<Paragraph text={t} />); // The added braces
              }
            );
        }

      </article>
    );
  }
}

非常感谢所有贡献者：）

组件内的多个元素使用for的render（）

3 个答案: