子元件可以將帶有 id 參數的函數傳遞給父元件嗎？

Question

是否可以使用 React 將帶有 id 參數的函數從子元件傳遞到父元件？ 我試圖將該函數作為道具傳遞給它的父組件。 元件的方案是App元件-> TasksList元件-> Task元件。因此，我需要透過點擊特定任務來路由到該任務，並使用其單獨的 ID。 重點是，點擊 url 後路由到任務後，會改為 /task/009，但任務元件不會呈現。

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

多個問題

1. # 這條線是我能夠看到第一期的地方。 您正在立即呼叫 goToTask。

2. 在您的應用程式元件中，您不會為各個任務路由渲染任務元件。若要解決此問題，您可以在應用程式元件中為單一任務定義路由，並為該路由渲染任務元件，如下所示：

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}
      {/* ... */}
    
  );
};

讓我知道是否需要進一步的幫助。