插件窝 干货文章 React 基础知识~映射函数/数据列表~

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

li example animals 显示 659    来源:    2024-10-19
  • 当我们想要显示一个数据列表时,我们该怎么做?

・src/example.js


const animals = ["dog", "cat", "rat"];

const example = () => {
  return (
    
      
    {/* not using the map function. */}
  • {animals[0]}
  • {animals[1]}
  • {animals[2]}

> ); };

export default example;

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

・src/example.js


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

const Example = () => {
  return (
    
      
    {/* Using the map function. */} {animals.map((animal) => (
  • {animal}
  • ))}

> ); };

export default Example;

  • 当我们想要显示一列数据时,经常会使用map函数来显示像

  • 元素这样的数组。
  • 请不要忘记将 key 属性放在

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

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

  • 元素上。

    ・这是屏幕上的结果。

    image description

                </li>