如何使用 React 钩子将我的 Todo 组件数据传递到我的 Todolist 组件中？

Question

这是一个链接https://codesandbox.io/s/fast-architecture-45u4m?file=/src/Todo.js

我添加了注释，显示我试图将哪些代码移到单独的组件中。

所以我有这个 todo 应用程序，原始代码在一个名为 TodoList.js 的组件中包含我的所有功能和逻辑

我正在尝试重构我的代码，以便 todo 的所有逻辑都在一个名为 Todo.js 的单独组件中

这是代码的样子

 <>
      {todos.map(todo => (
        <div className='todo-row'>
          <div
            key={todo.id}
            className={todo.isComplete ? 'complete' : ''}
            key={todo.id}
            onClick={() => completeTodo(todo.id)}
          >
            {todo.text}
          </div>
          <FaWindowClose onClick={() => removeTodo(todo.id)} />
        </div>
      ))}
    </>

所以我有这个 TodoList.js 组件和我所有的状态和函数，但是当我试图删除我的 todo 代码时，我似乎无法弄清楚如何重构它，所以仍然传递相同的数据，我能够再次使用我的所有功能

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

        const addTodo = todo => {
          if (!todo.text || /^\s*$/.test(todo.text)) {
            return;
          }

          const newTodos = [todo, ...todos];

          setTodos(newTodos);
          console.log(newTodos);
        };

        const removeTodo = id => {
          const removedArr = [...todos].filter(todoId => todoId.id !== id);

          setTodos(removedArr);
        };

        const completeTodo = id => {
          let updatedTodos = todos.map(todo => {
            if (todo.id === id) {
              todo.isComplete = !todo.isComplete;
            }
            return todo;
          });
          setTodos(updatedTodos);
        };

        return (
          <>
            <TodoForm onSubmit={addTodo} />
            <Todo />
          </>
        );
      }

      export default TodoList;

最初，我用上面第一个块中显示的代码替换了组件<Todo /> 。 但是现在我想将所有这些代码移动到它自己的名为 Todo.js 的组件中，然后从那里传入它，但是我遇到了错误，因为我在 TodoList.js 组件中拥有我的所有函数和状态逻辑

Answer 1

您可以通过TodoList组件中的 props 将数据和所需的函数传递给Todo组件，并且 Todo 组件应该按照名称仅代表 Todo 项，因此地图应保留在 TodoList 组件中，以便在更改后

TodoList.js

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

    const addTodo = todo => {
      if (!todo.text || /^\s*$/.test(todo.text)) {
        return;
      }

      const newTodos = [todo, ...todos];

      setTodos(newTodos);
      console.log(newTodos);
    };

    const removeTodo = id => {
      const removedArr = [...todos].filter(todoId => todoId.id !== id);

      setTodos(removedArr);
    };

    const completeTodo = id => {
      let updatedTodos = todos.map(todo => {
        if (todo.id === id) {
          todo.isComplete = !todo.isComplete;
        }
        return todo;
      });
      setTodos(updatedTodos);
    };

    return (
      <>
        <TodoForm onSubmit={addTodo} />
        {
             todos.map(todo => <Todo to do = {todo} removeTodo={removeTodo} completeTodo={completeTodo}/>)
        }
      </>
    );
  }

  export default TodoList;

和 Todo.js

const {todo} = props;
return (
    <div className='todo-row'>
      <div
        key={todo.id}
        className={todo.isComplete ? 'complete' : ''}
        key={todo.id}
        onClick={() => props.completeTodo(todo.id)}
      >
        {todo.text}
      </div>
      <FaWindowClose onClick={() => props.removeTodo(todo.id)} />
    </div>
);
 

Answer 2

根据您的沙箱。 你只需要传递道具：

待办事项.js

// I want to move this code into this component
import React from "react";

import { FaWindowClose } from "react-icons/fa";

const Todo = ({ todos, completeTodo, removeTodo }) => {
  return todos.map((todo) => (
    <div className="todo-row">
      <div
        key={todo.id}
        className={todo.isComplete ? "complete" : ""}
        onClick={() => completeTodo(todo.id)}
      >
        {todo.text}
      </div>
      <FaWindowClose onClick={() => removeTodo(todo.id)} />
    </div>
  ));
};

export default Todo;

TodoList.js

import React, { useState } from "react";
import TodoForm from "./TodoForm";
import Todo from "./Todo";
import { FaWindowClose } from "react-icons/fa";

function TodoList({ onClick }) {
  const [todos, setTodos] = useState([]);

  const addTodo = (todo) => {
    if (!todo.text || /^\s*$/.test(todo.text)) {
      return;
    }

    const newTodos = [todo, ...todos];

    setTodos(newTodos);
    console.log(newTodos);
  };

  const removeTodo = (id) => {
    const removedArr = [...todos].filter((todoId) => todoId.id !== id);

    setTodos(removedArr);
  };

  const completeTodo = (id) => {
    let updatedTodos = todos.map((todo) => {
      if (todo.id === id) {
        todo.isComplete = !todo.isComplete;
      }
      return todo;
    });
    setTodos(updatedTodos);
  };

  return (
    <>
      <TodoForm onSubmit={addTodo} />
      {/* I want to move this code below into a new component called Todo.js */}
      <Todo todos={todos} completeTodo={completeTodo} removeTodo={removeTodo} />
    </>
  );
}

export default TodoList;

这是演示： https : //codesandbox.io/s/nostalgic-silence-idm21?file=/ src/TodoList.js: 0-1039