5

以下に示すような react-admin アプリを検討してください。ユーザーがログインした後にすべてがロードさ'./posts'れるように、コードを分割する予定です。'./users'

webpack がアプリのコード分割を自動的に開始するように、使用できる動的 import() 構文を使用する予定です。

私が見る問題は、すべてのアプリ コンポーネントがアプリの定義と共にインポートされることです。の動的インポートは、アプリ自体でインポートされるため、分割さ'./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

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 に答える