使用异步路由时，将道具传递给组件

Question

我正在使用react-boilerplate，它在其路线中使用异步调用。JS提供组件。

在"/"路径中加载的组件定义为：

const SPoints = ({ actions, loading, error, regions, selectedRegion, region, regionLoading }) => {

，该组件的值来自这些值，例如region.name等

路由代码是：

const getRootComponent =（NextState，CB）=> {  导入（"容器/应用程序"）    然后（LoadModule（CB））    .CATCH（错误加载）;}导出默认函数createroutes（store）{ //使用getAsyncinjectors工厂创建可重复使用的异步注射器  const {InjectReducer，InjectSagas} = getAsynCinjectors（Store）;  返回 [{    小路： '/'，    名称：" Spoints"，    getComponent（Nextstate，CB）{      GetRootComponent（NextState，CB）;    }，，    indexroute：{      getComponent（Nextstate，CB）{        const ImportModules = Promise.All（[          导入（"容器/SPOINTS/REDUCER"），          导入（"容器/spoints/sagas"），          导入（"容器/Spoints"），        ）;        const RenderRoute = loadModule（cb）;        importModules.then（（[Reducer，Sagas，component]）=> {          InjectReducer（'Spoints'，reducer.default）;          InjectSagas（sagas.default）;          RenderRoute（组件）;        }）;        importModules.catch（errorloading）;      }    }  }

Spoints收到的道具如何传递给它？我在代码中看不到任何使组件如何获得道具的看法...

嗯。我现在认为导入的sagas.js是在redux商店中设置值，但我仍然看不到这些道具是如何传递的。

Answer 1

简而言之，React-Redux的Connect高阶组件正在从Redux Store提供这些道具。

但是，路由器点的组件将在React-Router中注入一些道具。

这是React-Boilerplate的一个示例容器之一。请注意使用mapStateToProps和mapDispatchToProps在底部的连接函数，该功能确实可以完成听起来的样子：地图状态和调度操作与要连接的组件的道具[与Redux的商店]。

https://github.com/react-boilerplate/react-boilerplate/blob/master/master/app/containers/homepage/index.js#l121

export function mapDispatchToProps(dispatch) {
  return {
    onChangeUsername: (evt) => dispatch(changeUsername(evt.target.value)),
    onSubmitForm: (evt) => {
      if (evt !== undefined && evt.preventDefault) evt.preventDefault();
      dispatch(loadRepos());
    },
  };
}
const mapStateToProps = createStructuredSelector({
  repos: makeSelectRepos(),
  username: makeSelectUsername(),
  loading: makeSelectLoading(),
  error: makeSelectError(),
});
// Wrap the component to inject dispatch and state into it
export default connect(mapStateToProps, mapDispatchToProps)(HomePage);