这个问题已经被问过,但是other answers不为我解决这个问题。我想通过signInWithEmail
我的处理函数<App />
组件向下通过 <Layout />
然后到<SignIn />
通过 <Route />
组件。
执行此操作的方法显然是通过 render
路线上的属性,但对我来说它只是渲染忽略我的 onSubmit
。在 React 开发工具中,我只看到默认的 Route props,尽管我可以在 <Layout />
中看到我的处理函数。元素显示为 props.signInWithEmail
。他们没有到达 <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>
)}
渲染应用程序的一部分:
render() {
return (
<div className="App">
<BrowserRouter>
<Layout
signInWithEmail={this.signInWithEmail}
signUpWithEmail={this.signUpWithEmail}
signOut={this.signOut}
state={this.state}
/>
</BrowserRouter>
</div>
);
}
最佳答案
发生这种情况是因为您覆盖了箭头函数中的 props。 尝试像这样解构 Layout prop:
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>
)}
关于javascript - React Router 4 通过 Route render 传递 props 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54992601/