如何用React渲染一个列表

在浏览器中创建一个列表是显示数据列表的一个超级常见的技术。在本教程中，我们将学习如何使用React创建一个项目列表。这与你在使用其他一些流行的UI框架（如Vue或Angular）时的做法有点不同。在那些其他框架中，你有自定义的指令，如v-for或ng-for，来直接在HTML中迭代。而React的做法是使用本地的JavaScript进行迭代。所以在 React 中，你可以使用 map() 函数来迭代一个数组并创建一个列表。现在让我们看看如何做到这一点。

---

创建一个静态列表

好的，首先要做的是。在我们使用任何JavaScript数组来帮助创建一个列表之前，让我们提醒自己如何简单地呈现一个静态列表。所以有了这个标记，我们就可以开始工作了。

import React, { Component } from "react";

class Item extends Component {
  state = {};

  render() {
    return (
      <React.Fragment>
        <ul class="list-group">
          <li class="list-group-item list-group-item-primary">List item 1</li>
          <li class="list-group-item list-group-item-primary">List item 2</li>
          <li class="list-group-item list-group-item-primary">List item 3</li>
        </ul>
      </React.Fragment>
    );
  }
}

export default Item;

---

动态渲染一个列表

要在React中动态地呈现一个列表，我们首先要在状态对象中添加一个属性。我们可以像这样用一个字符串数组来填充该属性。

import React, { Component } from "react";

class Item extends Component {
  state = {
    listitems: ['List Item 1','List Item 2', 'List Item 3']
  };

  render() {
    return (
      <React.Fragment>

      </React.Fragment>
    );
  }
}

export default Item;

很好。现在我们要移动到render()方法来动态地渲染每个列表项。这是在其他框架中，你可以使用ng-for或v-for类型的指令。在React中我们不能这么做。相反，我们可以使用JavaScript中内置的map函数。我们可以使用map函数将数组中的每个项目映射到一个反应元素。注意，我们把一个箭头函数作为参数传给map函数。

import React, { Component } from "react";

class Item extends Component {
  state = {
    listitems: ["List Item 1", "List Item 2", "List Item 3"]
  };

  render() {
    return (
      <React.Fragment>
        <ul className="list-group">
          {this.state.listitems.map(listitem => (
            <li className="list-group-item list-group-item-primary" />
          ))}
        </ul>
      </React.Fragment>
    );
  }
}

export default Item;

在这一点上，我们确实有一个列表，但每个li是空的。

我们怎样才能解决这个问题呢？我们所要做的就是在JSX表达式中使用大括号，像这样输出每个列表项。

import React, { Component } from "react";

class Item extends Component {
  state = {
    listitems: ["List Item 1", "List Item 2", "List Item 3"]
  };

  render() {
    return (
      <React.Fragment>
        <ul className="list-group">
          {this.state.listitems.map(listitem => (
            <li className="list-group-item list-group-item-primary">
              {listitem}
            </li>
          ))}
        </ul>
      </React.Fragment>
    );
  }
}

export default Item;

就这样！我们有了我们有了使用React和JavaScript map函数动态渲染的列表。

为了证明这个列表是动态的，我们可以改变listitems数组中的数据，看看会发生什么。

  state = {
    listitems: ["Spring", "Summer", "Fall"]
  };

---

列表中的每个子项都应该有一个唯一的 "key "道具。

我们现在有了一个很好的列表渲染，但我们还没有完成。通过检查浏览器中的控制台，我们现在注意到一个红色文本的警告信息。

index.js:1446 警告。列表中的每个孩子都应该有一个唯一的 "key "道具。

这里发生了什么？React抱怨的原因是它需要唯一地识别我们列表中的每个项目。如果这个反应元素在虚拟域中的状态发生了变化，React需要迅速找出哪个元素发生了变化，以及在真实域中需要反映这个变化。好吧，那么我们如何解决这个问题呢？好吧，无论何时我们使用map函数来渲染一个项目的列表，我们都需要在列表的li上设置key属性。下面是如何做到这一点的。

import React, { Component } from "react";

class Item extends Component {
  state = {
    listitems: ["Spring", "Summer", "Fall"]
  };

  render() {
    return (
      <React.Fragment>
        <ul className="list-group">
          {this.state.listitems.map(listitem => (
            <li
              key={listitem}
              className="list-group-item list-group-item-primary"
            >
              {listitem}
            </li>
          ))}
        </ul>
      </React.Fragment>
    );
  }
}

export default Item;

所以在上面突出显示的一行中，注意我们现在已经在li项上把key设置为一个动态值。现在在这种情况下，每个listitem都是一个字符串，而每个字符串都是唯一的。因此，我们可以使用listitem作为key的值。我们再一次检查了开发者工具控制台，我们不再得到这样的错误：列表中的每个孩子都应该有一个唯一的 "key "道具。在其他情况下，你所处理的数组可能包含对象。在这种情况下，每个对象可以有一个唯一的id，这将是key属性的值。另外，这个唯一的键是每个渲染的列表都是唯一的，而不是为整个应用程序。

---

将一个对象数组渲染成一个列表

最后，让我们渲染一个列表，其中状态属性包含一个对象的数组。这样我们就可以看到当你使用对象而不是简单的字符串时，唯一键的方法是如何工作的。

import React, { Component } from "react";

class Item extends Component {
  state = {
    listitems: [
      {
        id: 0,
        context: "Primary",
        modifier: "list-group-item list-group-item-primary"
      },
      {
        id: 1,
        context: "Secondary",
        modifier: "list-group-item list-group-item-secondary"
      },
      {
        id: 2,
        context: "Success",
        modifier: "list-group-item list-group-item-success"
      },
      {
        id: 3,
        context: "Danger",
        modifier: "list-group-item list-group-item-danger"
      },
      {
        id: 4,
        context: "Warning",
        modifier: "list-group-item list-group-item-warning"
      }
    ]
  };

  render() {
    return (
      <React.Fragment>
        <ul className="list-group">
          {this.state.listitems.map(listitem => (
            <li key={listitem.id} className={listitem.modifier}>
              {listitem.context}
            </li>
          ))}
        </ul>
      </React.Fragment>
    );
  }
}

export default Item;

]

---

用React渲染列表 摘要

正如我们所看到的，在React中渲染一个列表并不是那么糟糕。虽然React没有ng-for或v-for的语法糖，但我们可以简单地使用JavaScript map函数来产生相同的效果。这似乎是React的一个共同主题。使用本地JavaScript来完成某些任务，同时让React来管理虚拟域。