javascript - 如何通过React-Loadable获取状态？ React-Redux

我编写了一个自定义逻辑来处理react-router-dom .v4中的异步路由加载包。完美地工作。但我也听说过有用的有用API的软件包可以执行相同的操作，例如React-Loadable。它有一个问题，我无法从Redux推动的props / state抛出该程序包。在下面的两个示例中，我的代码从custom样式重写为react-loadable样式。最后一个是可加载的版本，它不会抛出状态/属性。我的个人密码：const asyncComponent = getComponent => { return class AsyncComponent extends React.Component { static Component = null; state = { Component: AsyncComponent.Component }; componentWillMount() { const { Component } = this.state if (!Component) { getComponent().then(({ default: Component }) => { const { store } = this.props // CAN GET THE REDUX STORE AsyncComponent.Component = Component; this.setState({ Component }); }); } } render() { const { Component } = this.state; if (Component) { return <Component {...this.props} /> } return null; } };};export default withRouter(asyncComponent(() => import(/* webpackChunkName: "chunk_1" */ './containers/Component')))相同的代码，但带有React-Loadable：const Loading = () => { return <div>Loading...</div>;}const asyncComponent = Loadable({ loader: () => import(/* webpackChunkName: "" */ './containers/Component') .then(state => { const { store } = this.props // CANNOT GET THE REDUX STORE!! }), loading: Loading})export default withRouter(asyncComponent) 最佳答案 要通过Provider从Redux存储获取状态，应将asyncComponent放在有状态组件包装中，就像在自定义异步逻辑中一样（第一种情况）。这是因为Loadable库像函数一样向您返回asyncComponent，而不是构造函数，因此他无法访问当前的Redux存储。因此，工作解决方案将是下一个：const Loading = () => { return <div>Loading...</div>;}const asyncComponent = Loadable({ loader: () => import(/* webpackChunkName: "" */ './containers/Component') .then(state => { const { store } = this.props // YOU WILL GET THE REDUX STORE!! }), loading: Loading})class asyncComponentWrapper extends Component{ // Component wrapper for asyncComponent render() { return <asyncComponent {...this.props} /> }}export default withRouter(asyncComponentWrapper)附言我不知道您想做什么，但是如果要在当前商店中进行减速器注入（可能正是您要尝试的事），则需要通过import而不是状态。