Question

有人问过这个问题，但是other answers并没有为我解决这个问题。我想将signInWithEmail组件中的<App />处理函数向下传递到<Layout />，然后通过<SignIn />传递到<Route />组件。

执行此操作的方法显然是通过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>
)}

渲染应用程序的一部分：

  render() {
    return (
      <div className="App">
        <BrowserRouter>
          <Layout 
            signInWithEmail={this.signInWithEmail} 
            signUpWithEmail={this.signUpWithEmail} 
            signOut={this.signOut} 
            state={this.state}
          />
        </BrowserRouter>
      </div>
    );
  }

Answer 1

发生这种情况是因为您在箭头功能中覆盖了道具。尝试像这样破坏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>
)}

React Router 4通过路由渲染传递道具不起作用

1 个答案: