通过组件从 parent 调用方法到 child

Question

我有两个组件

1)Job.jsx-parent 2)Jobmodel.jsx-child

所以我在job.jsx

中有一个方法

const [joblist, SetJoblist] = useState([]);
    const loadJobs = async () => {
        const res = await fetch("http://localhost:8000/api/getJobs");
        const data = await res.json();
        const list = data.job;
        SetJoblist(list);
    
    
      }

所以我想在模态关闭后从 child 调用相同的方法 function.so 我试过了

 <Jobdetailsmodal location={location} method={loadJobs}/>

和child的功能类似于

export default function Jobdetailsmodal({location},{loadJobs}) {
 function closeModal() {
    setIsOpen(false);
loadJobs();
}
}

但我得到了错误

TypeError: loadJobs is not a function

任何帮助将不胜感激

Answer 1

您遇到了一些语法问题。你应该像这样解构你的道具（因为你给你的组件的道具存储在一个单独的对象中）：

export default function Jobdetailsmodal({location,method}) { ... }

请注意，我将您传递的函数命名为 method，因为这是您在此处为其指定的名称：

 <Jobdetailsmodal location={location} method={loadJobs}/>

你完全可以命名它loadJobs，但是你必须保持一致，所以你在将 prop 传递给组件时以及在组件中使用相同的名称。

通过组件从 parent 调用方法到 child

Call method from parent to child via component

components

reactjs