是否可以使用 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;### ###
多個問題
在您的應用程式元件中，您不會為各個任務路由渲染任務元件。若要解決此問題，您可以在應用程式元件中為單一任務定義路由，並為該路由渲染任務元件，如下所示：
function App() { const [tasks, setTasks] = useState(Tasks); return (
);
}
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}
{/* ... */}讓我知道是否需要進一步的幫助。