React 中的 for 循环

Irakli Tchigladze 2023年1月30日 2021年12月4日
  1. 在 React 中使用 .map() 方法实现 for Map
  2. JavaScript for 循环
  3. 立即调用的函数
React 中的 for 循环

处理复杂的后端数据是前端开发人员工作的一部分。通常,数据包括代表 UI 的组件或其他构建块的对象列表。

例如,在创建在线商店时,数据可能包含需要出现在网站上的产品列表。由于多种原因,手动查看列表并一个一个地创建组件是低效的。例如,如果某个产品被删除或添加到列表中,你会怎么做?你不能每次都回去更新你的 JSX 文件。

有多种方法可以遍历列表并自动呈现组件或 HTML 元素。

在 React 中使用 .map() 方法实现 for Map

ES6 中引入的 .map() 方法是循环数组并返回一个有效的 JSX 元素的默认方法,该元素包含来自数组中每个项目的数据。开发人员通常使用此方法来创建自定义组件以及常规 HTML 元素。

尽管还有其他方法来执行循环,但大多数 React 开发人员使用 .map() 方法,因为它易于阅读、编写和维护。以下是如何遍历对象数组并将用户数据呈现到屏幕上:

class App extends Component {
  render() {
    const data = [{name: "John Doe", "age": 44}, {name:"Jane Doe", "age": 45}]
    console.log('App started');
    return <div>
    {data.map(person => <p key={person.name}>{`${person.name}, ${person.age} years old`}</p>)}
    </div>
  }
}

输出:

John Doe, 44 years old

Jane Doe, 45 years old

请记住,map() 方法在本示例中将运行两次,每次都返回一个段落元素。这就是为什么必须用 <div></div> 包装其结果的原因。每个组件都必须返回一个父容器,拥有任意数量的子元素。

key 属性

请记住,使用 .map() 方法创建的每个元素都必须有一个 key 标识符,并设置为唯一值。

<p key={person.name}>{}</p>)

React 不建议使用 index 值来为 key 属性生成唯一值。

传递 props

如果你打算使用 .map() 方法来渲染多个组件,你也可以传递 props

假设我们正在尝试渲染多个 Product 组件。以下是我们如何传递 props

return <div>
    {data.map(product => <Product price={product.price} name={product.name}></Product>)}
    </div>

JavaScript for 循环

循环数组的另一种方法是使用 for 循环。如果你选择这种方法,你必须在 return 块上方执行循环。

代码如下所示:

class App extends Component {
  render() {
    const data = [{name: "John Doe", "age": 44}, {name:"Jane Doe", "age": 45}]
    let persons = [];
    for (let i = 0; i<data.length; i++){
      persons.push(<p>{data[i].name + ", " + data[i].age + " years old"}</p>)
    }
    return <div>
    {persons}
    </div>
  }
}

.map() 相比,这种方法更加冗长且难以理解。但是,结果将是相同的。

立即调用的函数

return 语句中使用 for 循环在技术上是可行的,但是你必须创建一个函数并使用 for 循环作为主体。一旦你写完函数,你应该在它后面加上括号 () 以立即调用它。这是它的工作原理:

class App extends Component {
  render() {
    const data = [{name: "John Doe", "age": 44}, {name:"Jane Doe", "age": 45}]
    return 
    <div>
    {function() {
      let persons = []
    for (let i = 0; i<data.length; i++){
      persons.push(<p>{data[i].name + ", " + data[i].age + " years old"}</p>)
    }
    return persons
    }()
    }</div>
  }
}
Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn