我想将数据(单击)从一个组件(A)传递到另一个组件(B),但是A不是B的子代。
假设有一个表单组件(A),我们要在其中填写必填字段,然后单击“继续”按钮后,我们要在下一个组件(B)中显示所有值。
答案 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}}钩子导入。