Rumah > Soal Jawab > teks badan
Adakah mungkin untuk menghantar fungsi dengan parameter id daripada komponen anak kepada komponen induk menggunakan React? Saya cuba menyampaikan fungsi sebagai prop kepada komponen induknya. Penyelesaian komponen ialah komponen Apl-> komponen TasksList-> Jadi saya perlu menghala ke tugas tertentu dengan mengklik padanya dan menggunakan ID individunya. Intinya, apabila url diklik dan dihalakan ke tugasan, ia berubah kepada /task/009, tetapi komponen tugas tidak dipaparkan.
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;
P粉5628459412024-03-21 00:29:19
Pelbagai soalan
Dalam komponen aplikasi anda, anda tidak memberikan komponen tugasan untuk laluan tugas individu. Untuk menyelesaikan masalah ini, anda boleh menentukan laluan untuk satu tugasan dalam komponen aplikasi dan menjadikan komponen tugasan untuk laluan itu, seperti ini: {task.description} Beritahu saya jika saya memerlukan bantuan lanjut. 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}