[英]React Router 4 passing props through Route render doesn't work
有人问过这个问题,但是其他 答案并没有为我解决。 我想通过<Layout />
从<App />
组件向下传递signInWithEmail
处理函数,然后通过<Route />
传递给<SignIn />
组件。
这样做的方法显然是通过Route上的render
属性,但是对我来说,它只是渲染而忽略了我的onSubmit
。 在React开发工具中,即使我可以在<Layout />
元素中看到我的处理函数显示为props.signInWithEmail
,我也只能看到默认的Route道具。 他们没有进入<SignIn />
元素。
我想念什么? 谢谢。
const Layout = (props) => (
// i can console.log(props) here and see props.signInWithEmail
<div className="layout">
// header etc...
<main>
<Switch>
// ... other routes
<Route
path="/signin"
render= {(props) => <SignIn onSubmit={props.signInWithEmail} />}
/>
</Switch>
</main>
// footer etc...
</div>
)}
呈现App的一部分:
render() {
return (
<div className="App">
<BrowserRouter>
<Layout
signInWithEmail={this.signInWithEmail}
signUpWithEmail={this.signUpWithEmail}
signOut={this.signOut}
state={this.state}
/>
</BrowserRouter>
</div>
);
}
发生这种情况是因为您在箭头功能中覆盖了道具。 尝试像这样破坏Layout属性:
const Layout = ({signInWithEmail}) => (
// i can console.log(props) here and see props.signInWithEmail
<div className="layout">
// header etc...
<main>
<Switch>
// ... other routes
<Route
path="/signin"
render= {() => <SignIn onSubmit={signInWithEmail} />}
/>
</Switch>
</main>
// footer etc...
</div>
)}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.