在 React 中渲染列表

翻滚的胖子
2023-09-06 10:54:47
前端技术
JavaScript

React 是一个用于构建用户界面的 JavaScript 库。在 React 中，我们经常需要渲染列表。本教程将向您展示如何使用函数来渲染列表，并提供易于理解的代码案例。

渲染列表的基本概念

在 React 中，我们可以使用函数组件来渲染列表。函数组件是一个接受参数并返回 React 元素的函数。我们可以通过遍历数据数组，并为每个数组元素调用函数组件来渲染列表。

代码实例

import React from 'react';

function ListItem(props) {
  return {props.value};
}

function List(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    
  );
  return (
    {listItems}
  );
}

function App() {
  const numbers = [1, 2, 3, 4, 5];
  return (
    
      列表渲染示例
      
    
  );
}

export default App;

在上面的代码中，我们定义了两个函数组件：ListItem 和 List。ListItem 组件接受一个名为 value 的 props，并在一个 li 元素中显示它。List 组件接受一个名为 numbers 的 props，遍历 numbers 数组，并为每个数组元素调用 ListItem 组件来渲染 li 元素。最后，在 App 组件中，我们定义了一个名为 numbers 的数组，并将其作为 props 传递给 List 组件。