javascript - React Router 4 通过 Route render 传递 props 不起作用

Question

这个问题已经被问过，但是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>
    );
  }

Answer 1

发生这种情况是因为您覆盖了箭头函数中的 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>
)}