如何在React TodoList中使用Props与子组件重构列表渲染

你当前的TodoList把列表项渲染逻辑写在App组件内，现在要将这部分拆分为独立子组件，通过props传递单个todo对象和回调方法，以下是具体修改步骤：

步骤1：创建TodoItem子组件 #

在项目中新建TodoItem.js文件，这个组件负责渲染单个待办项，接收两个核心props：

• todo：单个待办对象，包含id、title、completed等属性
• onUpdate：复选框状态变化时触发的回调函数

import { Link } from 'react-router-dom';

function TodoItem({ todo, onUpdate }) {
  return (
    <div className='elements'>
      <li className="list-group-item ">
        <div className='checkBox'>
          <input 
            type='checkbox' 
            id={todo.id} 
            onChange={onUpdate} 
            checked={todo.completed} // 绑定实际完成状态，让页面与数据同步
          />
        </div>
        <div className='lists'>
          <Link to={`./More?id=${todo.id}`}>{todo.title}</Link>
        </div>
      </li>
    </div>
  );
}

export default TodoItem;

步骤2：修改原App组件 #

在App.js中导入TodoItem组件，替换原map循环内的列表项代码，将todo对象和updateData回调通过props传递给子组件：

import 'bootstrap/dist/css/bootstrap.min.css';
import React, { useEffect, useState } from 'react';
import './App.css';
import TodoItem from './TodoItem'; // 导入子组件

function App() {
  const [todos, setTodos] = useState([]);
  const fetchData = () => {
    fetch(`https://jsonplaceholder.typicode.com/todos?userId=1`)
      .then((response) => response.json())
      .then((actualData) => {
        setTodos(actualData);
      });
  };

  const updateData = (e) => {
    const id = parseInt(e.target.id);
    const checked = e.target.checked;

    // 合并if-else逻辑，直接用checked值作为请求参数
    fetch(`https://jsonplaceholder.typicode.com/todos/${id}`, {
      method: 'PATCH',
      body: JSON.stringify({ completed: checked }),
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    })
    .then((response) => response.json())
    .then(() => {
      // 更新本地状态，让页面实时反映后端修改结果
      setTodos(prevTodos => 
        prevTodos.map(todo => 
          todo.id === id ? { ...todo, completed: checked } : todo
        )
      );
    });
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div>
      <div className="main">
        <div className='title'>
          <h1>Todo-List</h1>
        </div>
        <ul>
          {todos.map(todo => (
            <TodoItem key={todo.id} todo={todo} onUpdate={updateData} />
          ))}
        </ul>
      </div>
    </div>
  );
}

export default App;

关键细节说明 #

• props传递逻辑：子组件通过解构赋值接收父组件的数据和方法，实现了渲染逻辑与数据/业务逻辑的分离
• key优化：用todo.id作为列表项的key，比索引更稳定，避免React渲染时出现异常
• 状态同步：新增本地状态更新逻辑，让页面复选框状态与后端返回结果实时同步，提升用户体验
• 代码简化：将原updateData中的if-else逻辑合并，减少冗余代码

你的App.css文件无需修改，所有样式类名与原代码一致，会自动应用到子组件的元素上。

内容的提问来源于stack exchange，提问作者Joel John Noronha