Javascript 在react中从功能组件传递真/假状态

我想在其他组件中读取此组件的状态

我一直在寻找教程，但我找不到任何能以我需要的方式解释它的教程

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>
  );
}

导出默认函数任务（{Task}）{
const[isDone，setIsDone]=React.useState（false）；
返回(
setIsDone（真）}/>
setIsDone（假）}
/>
{task}
);
}

如何将“isDone”传递给其他组件，然后检查它是否正确，然后根据该信息采取行动

提前谢谢

编辑：

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

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

将默认函数导出到列表（）{
返回(
);
}

您可以通过上下文来实现这一点，但我相信还有更简单的解决方案。您只需将任务信息保存在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>
  );

const tasks=[{name:“task 1”，id:1}，{name:“task 2”，id:2}]
将默认函数导出到列表（）{
const[completedTasks，setCompletedTasks]=React.useState（[]）；
返回(
{tasks.map（（任务）=>
setCompletedTasks（[…completedTasks，task.id）]）}
onRemoveFromCompleted={（）=>setCompleted（…completedTasks.filter（t=>t.id！==task.id））}/>）}
);

}

在任务组件中，只需像这样传递值

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>
);
}

导出默认函数任务（{Task，isDone，onComplete，onRemoveFromCompleted}）{
返回(
{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>
  );
}

导出默认函数任务（{Task}）{
const[isDone，setIsDone]=React.useState（false）；
返回(
setIsDone（真）}/>
setIsDone（假）}
/>
{task}
);
}
将默认函数导出到列表（道具）{
返回(
);
}

我看你已经在这么做了。您遇到了什么问题？您正在

NotDone

和

Done

组件中执行检查操作编辑以获取信息：-）然后，将您的状态保留在父级（任务数据数组）中，并根据该数据进行渲染。React是自上而下的数据流。在不破坏框架的情况下开发任何东西都非常重要。