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 is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn