0

我有一组容器，我现在已经分开了。布局包含应用导航链接。应用程序包含布局中的内容（实际上是子级）。

这是不使用Layout导航链接时代码的外观。 

export const App = hot(module)(() => (
  <div>
    <Switch>
      <Route exact path="/login" component={ Login } />
      <Route path="/csp" component={ CspApp } />
    </Switch>
    <ToastContainer transition={ Flip }/>
  </div>
));

这位于ReactDOM.render：

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);

这一切都有效，直到我将布局与 base 分开CspApp。

我试图添加一个布局，所以它看起来像这样：

export const App = hot(module)(() => (
  <div>
    <Switch>
      <Route exact path="/login" component={ Login } />
      <Layout> <----- Expecting props
        <Route path="/csp" component={ CspApp } />
      </Layout>
    </Switch>
    <ToastContainer transition={ Flip }/>
  </div>
));

我相信这会起作用，但非常正确的是，它期望顶部导航的道具能够正确呈现。

如何正确地将道具传递给这个？我可以通过将 store 一个一个地传递给组件来做到这一点：

  <Layout prop1={store.getState().prop1} action1={store.getState().action1}>

但是有没有更好的方法来实现这一点？

4

1 回答 1

0

最简单的解决方案是将布局组件连接到 store：

export default connect(stateToProps, dispatchToProps)(Layout);

您将可以访问 Layout 组件中的商店。如果您需要将一些额外的道具传递给 Layout 组件，您应该在连接的组件顶部执行以下操作：

<div>
<Switch>
  <Route exact path="/login" component={ Login } />
  <Layout prop1="static-value" prop2={value}>
    <Route path="/csp" component={ CspApp } />
  </Layout>
</Switch>
<ToastContainer transition={ Flip }/>
</div>

更新：我明白你为什么感到困惑了，在新的 Redux-React 站点的文档中，如果你需要使用组件的一些道具调度 Action，我看不到以下常见且经常使用的模式：

const stateToProps = state => ({ stateProp2: state.someValue });
const dispatchToProps = (dispatch, { prop1, stateProp2 }) => ({
    doSomethingWithProp1: () => {
      console.log(prop1);
      dispatch({ type: 'SOME_ACTION', payload: stateProp2 }); // Take advantage of Layout's props also you can pass some props directly from state and get them here
    },
});

export default connect(stateToProps, dispatchToProps)(Layout);

你可以从组件的 props中获取doSomethingWithProp1()函数并调用它：Layout

export class Layout extends Component {
  render() {
    return <div>Layout -- <button onClick={this.props.doSomethingWithProp1}>Click here</button></div>
  }
}
于 2018-06-18T03:36:39.283 回答