Un composant enfant peut-il transmettre une fonction avec un paramètre id au composant parent ?

Question

Est-il possible de passer une fonction avec un paramètre id d'un composant enfant à un composant parent en utilisant React ? J'essaie de transmettre la fonction comme accessoire à son composant parent. La solution de composant est le composant App-> Composant TasksList-> Je dois donc me diriger vers une tâche spécifique en cliquant dessus et en utilisant son identifiant individuel. Le fait est que lorsque l'on clique sur l'URL et qu'on l'achemine vers la tâche, elle devient /task/009, mais le composant de la tâche ne s'affiche pas.

https://codesandbox.io/s/test-login-page-tasks-rmfn5j?file=/src/components/Taskslist.js

//App component
const Tasks = [
  {
    id: "001",
    status: 0,
    priority: 2,
    title: "Develop website homepage",
    description:
      "Create a visually appealing and responsive homepage for the website",
    schedule: {
      creation_time: "2021-07-23T10:00:00"
    },
    author_name: "John Smith"
  },
  {
    id: "002",
    status: 1,
    priority: 1,
    title: "Implement user authentication",
    description: "Add user authentication feature to the website",
    schedule: {
      creation_time: "2021-07-24T14:30:00"
    },
    author_name: "Sarah Lee"
  }
  ]
  
  function App() {
  const [tasks, setTasks] = useState(Tasks);
  return (
  
    <Route path="/taskslist">
      <Taskslist Tasks={tasks} />
    </Route>
  )

// Parent component
import React from "react";

const Taskslist = ({ Tasks }) => {
  const history = useHistory();

  const goToTask = (taskId) => {
    history.push(`/task/${taskId}`);
  };

  return (
    <Task
      Tasks={Tasks.filter((task) => task.status === 0)}
      goToTask={goToTask}
    />
}

//Child component

import React from "react";

const Task = ({ Tasks, goToTask }) => {
  return (
    <div className="wrapper">
      {Tasks.map((task) => (
        <div key={task.id} onClick={goToTask(task.id)}>
          <h3>{task.title}</h3>
        </div>
      ))}
    </div>
  );
};

export default Task;

Answer 1

Plusieurs questions

1. C'est sur cette ligne que j'ai pu voir le premier numéro. Vous appelez goToTask immédiatement.

2. Dans votre composant d'application, vous ne restituez pas les composants de tâches pour les itinéraires de tâches individuels. Pour résoudre ce problème, vous pouvez définir un itinéraire pour une seule tâche dans le composant d'application et afficher le composant de tâche pour cet itinéraire, comme ceci :

function App() {
  const [tasks, setTasks] = useState(Tasks);

  return (
    
      
        
          
        
        
          
        
      
    
  );
}

3. à Task 组件中，您需要确保从 URL 中过滤所选任务。使用 useParams()

import { useParams } from "react-router";

const Task = ({ Tasks }) => {
  const { id } = useParams();
  const task = Tasks.find((task) => task.id === id);

  return (
    

      
{task.title}
      
{task.description}
      {/* ... */}
    
  );
};

Faites-moi savoir si j'ai besoin d'aide supplémentaire.