react todo list组件化小案例

好的，下面是一个简单的 React Todo List 组件化的示例代码：

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  function handleAddTodo() {
    if (inputValue.trim()) {
      setTodos([...todos, { id: Date.now(), text: inputValue.trim() }]);
      setInputValue('');
    }
  }

  function handleDeleteTodo(id) {
    setTodos(todos.filter(todo => todo.id !== id));
  }

  return (
    <div>
      <h2>Todo List</h2>
      <input
        type="text"
        value={inputValue}
        onChange={e => setInputValue(e.target.value)}
      />
      <button onClick={handleAddTodo}>Add Todo</button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            {todo.text}{' '}
            <button type="button" onClick={() => handleDeleteTodo(todo.id)}>
              Delete
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

在这个示例代码中，我们定义了一个名为 `TodoList` 的函数组件，它使用了 React 的 `useState` 钩子来管理 `todos` 和 `inputValue` 状态。

在组件渲染时，我们通过 `todos.map` 方法遍历 `todos` 数组，生成一个包含所有待办事项的列表。同时，每个待办事项后面都有一个 `Delete` 按钮，点击该按钮将会触发 `handleDeleteTodo` 方法，删除对应的待办事项。

在 `handleAddTodo` 方法中，我们使用了 ES6 的扩展语法来添加新的待办事项，同时清空输入框的内容。

最后，我们将 `TodoList` 组件导出，并在其他组件中引用它即可。