Javascript 在本例中，onToggle道具是如何工作的？

这个应用程序有三个文件在彼此之间传输相同的道具（

onToggle

），但我不理解它背后的逻辑。有人能给我解释一下它是怎么工作的吗

App.js

是创建名为

onToggle

的道具的地方

function App(){
  const [tasks, setTasks] = useState([
    {
      id: 1,
      text: "Food shopping1",
      day: "Feb 5th at 2:30pm",
    },
    {
      id: 2,
      text: "Food shopping2",
      day: "Feb 5th at 2:30pm",
    },
    {
      id: 3,
      text: "Food shopping3",
      day: "Feb 5th at 2:30pm",
    },
  ]);


  //delete task
  function deleteTask(id){
    setTasks(tasks.filter(task => task["id"] !== id))
    return console.log(id)
  }

  // Toggle reminder
  function toggleReminder(id){
    console.log(id)
  }
    return(
      <div className="container">
        <Header />
        {tasks.length > 0 ? <Tasks tasks={tasks} onDelete={deleteTask} onToggle={toggleReminder}/> : "No Events"}
      </div>
    )
  }

  export default App

如您所见，

Tasks

组件由一个

Task

prop组成，它包含一个

onToggle

prop

Task

组件由一个

react表情符号
FaTimes
组成，它执行
onClick
一个返回
props.onToggle（props.Task.id）

export const Task=（道具）=>{
返回(
{props.task.text}props.onDelete（props.task.id）}
onClick={（）=>props.onToggle（props.task.id）}/>
{props.task.day}

)
}
任务组件基本上是试图向应用程序组件发送信息

每次在任务组件中单击表情符号（FaTimes）时，发生单击操作的任务组件的id都会传递给应用程序组件。如果正在使用FaTimes图标（我假设它是一个delete图标），我会说，正在讨论的任务被删除了，应用程序组件得到了这个更新，因此它可以做出适当的反应（可能会调用API来更新状态）

逐步过程：
应用程序组件是任务的父组件，它是任务的父组件。在应用程序组件中定义了对任务删除做出反应的操作。因此，当任务被删除时，任务组件需要一种与应用程序组件通信的方式。方法“deleteTask”作为道具传递给子组件任务，同样作为道具传递给任务组件。当任务组件中存在删除操作时，onClick操作调用onDelete属性，该属性最终在应用程序组件中被调用，以对作为参数发送到回调函数的任务ID执行deleteTask方法。
您是否希望对每个步骤进行一步一步的解释？我已对答案进行了编辑，并给出了解释。
export const Tasks = (props) => {

  return (
  <div>
    {props.tasks.map((task) => 
        <Task key={task.id} task={task} onDelete={props.onDelete} onToggle={props.onToggle}/>
    )}
  </div>)

};

export const Task = (props) => {
    return (
        <div className="task">
            <h3>{props.task.text} <FaTimes style={{ color: "red", cursor: "pointer" }} onClick={() => props.onDelete(props.task.id)}
            onClick={() => props.onToggle(props.task.id)}/> </h3>
            <p>{props.task.day}</p>
            
        </div>
    )
}