React 基础知识~映射函数/数据列表~

• 当我们想要显示一个数据列表时，我们该怎么做？

・src/Example.js

const animals = ["Dog", "Cat", "Rat"];

const Example = () => {
  return (
    <>
      <ul>
        {/* Not using the map function. */}
        <li>{animals[0]}</li>
        <li>{animals[1]}</li>
        <li>{animals[2]}</li>
      </ul>
    </>
  );
};

export default Example;

• 此代码正确显示数据列表。

・src/Example.js

const animals = ["Dog", "Cat", "Rat"];

const Example = () => {
  return (
    <>
      <ul>
        {/* Using the map function. */}
        {animals.map((animal) => (
          <li> {animal}</li>
        ))}
      </ul>
    </>
  );
};

export default Example;

• 当我们想要显示数据列表时，经常会使用Map函数来显示

• 这样的数据数组。 元素。

• 请不要忘记将 key 属性放在

• 上。 元素。

• 此代码比上一个更干净。

・这是控制台的警告，以防我们没有将 key 属性放在

上。元素。

・这是屏幕上的结果。

以上是React 基础知识~映射函数/数据列表~的详细内容。更多信息请关注PHP中文网其他相关文章！