5

考虑如下所示的 react-admin 应用程序。我计划以一种所有内容都在'./posts'并且'./users'仅在用户登录后才加载的方式进行代码拆分。

我计划使用我可以使用的动态 import() 语法，以便webpack 自动开始对应用程序进行代码拆分。

我看到的问题是所有应用程序组件都是使用应用程序的定义导入的。动态导入内容'./posts'并且'./users'不会拆分，因为它是在应用程序本身导入的。

如何设置和拆分此代码库，以便仅在用户登录后才加载'./posts'和加载内容？'./users'

import React, { Component } from 'react';
import { Admin, Resource } from 'react-admin';
import { Login } from 'ra-ui-materialui';
import { authProvider, dataProvider, i18nProvider } from './providers';
// vvv - to be loaded after the user has logged in 
import { PostList, PostEdit, PostCreate, PostIcon } from './posts';
import { UserList, UserEdit, UserCreate, UserIcon } from './users';
// ∧∧∧

class App extends Component {
    render() {
        return (
            <Admin
                title="MyApp"
                loginPage={Login}
                dataProvider={dataProvider}
                authProvider={authProvider}
                i18nProvider={i18nProvider}
            >
                <Resource
                    name="posts"
                    list={PostList}
                    edit={PostEdit}
                    create={PostCreate}
                    icon={PostIcon}
                />
                <Resource
                    name="users"
                    list={UserList}
                    edit={UserEdit}
                    create={UserCreate}
                    icon={UserIcon}
                />
            </Admin>
        );
    }
}
export default App;
4

2 回答 2

2

用 react-loadable 包装你的“帖子”和“用户”组件。

我最近的用法（使用纯 react-router 应用程序和 react-admin 应用程序！）

import Loadable from 'react-loadable';

const AsyncCrontabList = Loadable({
    loader: () => import('./containers/Crontab/CrontabList'),
    loading: Loading
});

<Resource name="crontabs" context="interval"
                              options={{ label: 'Crontabs', group: 'Automation' }}    icon={<TimerIcon/>}
                              list={AsyncCrontabList}
                              create={AsyncCrontabCreate}
                              edit={AsyncIntervalEdit}/>

之后，我可以看到组件在 F12 - Debug 中被分块。据我所知，当我们导航到正确的路径时，这些块将被加载（实际导入）。使用 react-admin，资源是通过名称来识别和导航的，所以当你在这里应用 loadable 方法时，它就可以工作了！这就是我的用例。

于 2018-10-15T10:05:50.820 回答
0

据我了解，您只想在登录后显示帖子和用户，因此您可以做的就是使用状态变量将另一个组件包装到一个条件下，并将一个函数传递给您的Admin组件并在登录成功时调用它，就像这样：

import React, { Component } from 'react';
import { Admin, Resource } from 'react-admin';
import { Login } from 'ra-ui-materialui';
import { authProvider, dataProvider, i18nProvider } from './providers';
// vvv - to be loaded after the user has logged in 
import { PostList, PostEdit, PostCreate, PostIcon } from './posts';
import { UserList, UserEdit, UserCreate, UserIcon } from './users';
// ∧∧∧

class App extends Component {
   state:{
     loggedIn: false,
          }
    onLoginSuccess(){
     this.setState({loggedIn: true});
     }
    render() {
        return (
            <Admin
                title="MyApp"
                loginPage={Login}
                onLoginSuccess={this.onLoginSuccess.bind(this)}
                dataProvider={dataProvider}
                authProvider={authProvider}
                i18nProvider={i18nProvider}
            >
               {(this.state.loggedIn) && 
                  <Resource
                    name="posts"
                    list={PostList}
                    edit={PostEdit}
                    create={PostCreate}
                    icon={PostIcon}
                />
                <Resource
                    name="users"
                    list={UserList}
                    edit={UserEdit}
                    create={UserCreate}
                    icon={UserIcon}
                />
             }
            </Admin>
        );
    }
}
export default App;

或者更好的方法可能是创建一个单独的路由文件并在那里处理所有这些逻辑

于 2018-05-11T10:05:56.027 回答