如何从另一个组件调用反应组件并传递所需的道具

Question

目前，我的 App.js 文件中有以下路线：

<Switch>
  <Route exact path="/new-job"
          render={(props) => <NewJob jobName={jobName} setMenuSelection={handleMenuSelection} />}
  />
  <Route exact path="/past-jobs"
          render={(props) => <PastJobs setMenuSelection={handleMenuSelection} />}
 />
</Switch>

现在在我的 PastJobs 组件中，我有以下带有 onClick 过程的按钮：

<Button
    onClick={() => {
      setConfirmDialog({
         isOpen: true,
         title: `Copy Job ${item.id}?`,
         onConfirm: () => { onCopy(item.job_info) }
      })
   }}         
>
Copy
</Button>

调用以下函数：

const onCopy = (job_info) => {
    setConfirmDialog({
        ...confirmDialog,
        isOpen: false
    })
    history.push({
        pathname: '/new-job',
        state: { detail: job_info }
    })
}

在我的 <NewJob /> 组件中，我现在设置了以下内容，因为我认为我可以访问 state.detail 但不幸的是它是空的，即：

import { useLocation } from 'react-router-dom';

function NewJob( { jobName, setMenuSelection } ) {
    
       const { state } = useLocation();
    
       if (typeof state !== 'undefined') {
         const myVal = state.detail
         console.log("myVal", myVal )
       }
    
}

我遇到但不确定如何处理的问题是，在从按钮 onClick 调用的 onCopy 函数中，我如何调用路径为 exact path="/new-job" 的 <NewJob /> 组件App.js 并传入道具 job_info ?

Answer 1

直接调用组件实际上是不存在的。但是你想要的可以通过不同的方式实现。

将状态机与事件总线（redux、redux-saga）结合使用
渲染道具https://reactjs.org/docs/render-props.html
通过道具（HOC）钻取的一堆回调
参考 https://reactjs.org/docs/refs-and-the-dom.html

我建议阅读更多关于它们的信息，以真正了解它是否符合您的用例。无论如何，这也是发展你的技能的好经历！

如何从另一个组件调用反应组件并传递所需的道具

How to call a react component from another component and pass required props

javascript

state

reactjs

react-router

react-props