Question

我想阅读其他组件中该组件的状态。

我一直在寻找教程，但找不到能以我所需的方式进行解释的教程。

export default function Task({ task }) {
  const [isDone, setIsDone] = React.useState(false);
  return (
    <TaskWrapper>
      <CheckBox>
        <NotDone isDone={isDone} onClick={() => setIsDone(true)} />
        <Done
          isDone={isDone}
          src={checkMark}
          alt={"is done"}
          onClick={() => setIsDone(false)}
        />
      </CheckBox>
      <Todo>{task}</Todo>
    </TaskWrapper>
  );
}

我如何将“ isDone”传递给其他组件，然后检查它是对还是错，然后对该信息采取行动？

谢谢！

编辑：

我想知道任务是否在这里完成。

export default function TodoList() {
  return (
    <Todos>
      <Task task={"Task 1"} />
      <Task task={"Task 2"} />
      <Task task={"Task 3"} />
    </Todos>
  );
}

Answer 1

您可以根据具体情况执行此操作，但是我相信还有更简单的解决方案。您只需要将任务信息保留在TodoList中即可。

const tasks = [{name: "task 1", id: 1}, {name: "task 2", id: 2}]
export default function TodoList() {
const [completedTasks, setCompletedTasks] = React.useState([]);
  return (
    <Todos>
       {tasks.map((task) => 
         <Task 
          task={task.name}
          isDone={completedTasks.includes(task.id)}
          onComplete={() => setCompletedTasks([...completedTasks, task.id)])}
          onRemoveFromCompleted={() => setCompleted(...completedTasks.filter(t => t.id !== task.id)))} />)}
    </Todos>
  );

}

比在任务组件中传递像这样的值

export default function Task({ task, isDone, onComplete, onRemoveFromCompleted }) {

   return (
    <TaskWrapper>
     <CheckBox>
      <NotDone isDone={isDone} onClick={onComplete} />
       <Done
         isDone={isDone}
         src={checkMark}
         alt={"is done"}
         onClick={onRemoveFromCompleted}
       />
    </CheckBox>
   <Todo>{task}</Todo>
</TaskWrapper>
);
}

Answer 2

您能否仅将道具从Task组件传递到TodoList组件？

export default function Task({ task }) {
  const [isDone, setIsDone] = React.useState(false);
  return (
    <TaskWrapper
        isDone={isDone}
    >
      <CheckBox>
        <NotDone isDone={isDone} onClick={() => setIsDone(true)} />
        <Done

          src={checkMark}
          alt={"is done"}
          onClick={() => setIsDone(false)}
        />
      </CheckBox>
      <Todo>{task}</Todo>
    </TaskWrapper>
  );
}
export default function TodoList(props) {
  return (
    <Todos>
      <Task isDone={props.isDone} /> 

    </Todos>
  );
}

从反应中的功能组件传递真/假状态

2 个答案: