Question

我正在使用withLayout来包装Switch Route中的每个组件。但是这样做无法在props页面上继承SignIn。我的App.js文件如下：

function withLayout(WrappedComponent, props) {
  // ...and returns another component...
  return class extends React.Component {
    render() {
      return (
        <Layout>
          <WrappedComponent></WrappedComponent>
        </Layout>
      );
    }
  };
}

class App extends Component {
  render() {
    return (
      <React.Fragment>
        <Provider store={store}>
          <Router>
            <React.Suspense fallback={<div></div>}>
              <Switch>
                <Route exact path="/" component={withLayout(HomePage)} />
                <Route exact path="/login" component={withLayout(SignIn)} />
                <Route
                  exact
                  path={["/apply"]}
                  component={withLayout(NewQuote)}
                />
              </Switch>
            </React.Suspense>
          </Router>
        </Provider>
      </React.Fragment>
    );
  }
}

export default withRouter(App);

如果我不使用布局包装器，则只需执行以下操作即可获得道具：

component={props => <SignIn {...props} />}

但是现在，如何通过在组件周围使用包装器来获得道具？谢谢！

Answer 1

似乎我可以直接放置以下内容以使道具通过做子组件

<Route
                  exact
                  path="/login"
                  component={props => (
                    <Layout>
                      <SignIn {...props} />
                    </Layout>
                  )}
                />

如何将道具传递到路线中的组件？

1 个答案: