Question

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

这是代码在不使用带导航链接的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')
);

这一切都有效，直到我将布局与基础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>
));

我相信这会有效，但非常正确，它期望顶部导航的道具能够正确渲染。

如何正确传递道具？我可以通过将商店逐个传递给组件来实现：

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

但有更好的方法来实现这一目标吗？

Answer 1

最简单的解决方案是连接布局component to the store：

export default connect(stateToProps, dispatchToProps)(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>

更新：我知道你为什么感到困惑，在new Redux-React site's docs中我没有看到以下常见的模式，如果你需要发送，经常使用一个带有组件道具的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);

您可以从doSomethingWithProp1()组件的道具中获取Layout功能并调用它：

export class Layout extends Component {
  render() {
    return <div>Layout -- <button onClick={this.props.doSomethingWithProp1}>Click here</button></div>
  }
}

带道具的Redux / Layout容器。使用React Router将道具从商店传递到布局

1 个答案: