如何在React中动态填充列表项

在React中动态填充列表项可以通过以下步骤实现：

创建一个React组件，用于渲染列表项。可以使用函数组件或类组件来实现。
在组件的state中定义一个数组，用于存储列表项的数据。
在组件的生命周期方法（如componentDidMount）中，通过网络请求、数据库查询或其他方式获取列表项的数据，并将数据存储到state中。
在组件的render方法中，使用map函数遍历state中的数据数组，并为每个数据项创建一个列表项元素。
在列表项元素中，使用state中的数据填充内容。可以使用JSX语法将数据动态插入到元素中。

以下是一个示例代码：

import React, { useState, useEffect } from 'react';

const DynamicList = () => {
  const [listData, setListData] = useState([]);

  useEffect(() => {
    // 模拟异步获取数据
    setTimeout(() => {
      const data = ['Item 1', 'Item 2', 'Item 3'];
      setListData(data);
    }, 1000);
  }, []);

  return (
    <ul>
      {listData.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

export default DynamicList;

在上述示例中，我们使用了React的Hooks API来定义函数组件，并使用useState来管理列表项数据。在useEffect中模拟了异步获取数据的过程，并将数据存储到state中。在render方法中，使用map函数遍历state中的数据数组，并为每个数据项创建一个li元素，将数据动态填充到列表项中。

这是一个简单的示例，你可以根据实际需求进行扩展和优化。如果你想了解更多React相关的知识和技术，可以参考腾讯云的React产品文档：React产品文档。