将数据从一个组件传递到另一个组件(不是子组件)?

时间:2020-01-15 17:47:14

标签: javascript reactjs react-router

我想将数据(单击)从一个组件(A)传递到另一个组件(B),但是A不是B的子代。

假设有一个表单组件(A),我们要在其中填写必填字段,然后单击“继续”按钮后,我们要在下一个组件(B)中显示所有值。

3 个答案:

答案 0 :(得分:1)

您可以使用React Portals,它允许在应用程序dom中的任何位置渲染组件,并且可以从控制组件传递道具。

阅读文档 https://reactjs.org/docs/portals.html

render() {
  // React does *not* create a new div. It renders the children into `domNode`.
  // `domNode` is any valid DOM node, regardless of its location in the DOM.
  return ReactDOM.createPortal(
    <YourComponent prop1={value1} prop2={value2}/>,
    domNode
  );
}

答案 1 :(得分:0)

您可以使用react context API或redux在组件之间共享状态。

或者,如果您只想在导航时传递数据,则可以使用history.push函数并按如下所示在状态对象中传递数据

history.push({pathname: 'yourlocation', state: { data: your data}})

您可以使用

访问其他组件中的数据
this.props.history.location.state

请注意,您必须使用withRouter包装组件以获取历史记录对象

答案 2 :(得分:0)

您可以使用Link中的react-router-dom来传递数据。

<Link
  to={{
    pathname: "/courses",
    state: { fromDashboard: true }
  }}
/>

在上面的代码state中,可以在history对象中访问该对象,该对象可以从useHistory的{​​{1}}钩子导入。