反応：海導入antdがピットを強化

これは、最初の問題をクリアする必要があります。

antdまたは何か他のものかどうか、DVA、彼らは海のプラグイン-限り、プロジェクトは海の足場を使用して生成されます。

 

だから、最初のステップは、あるべき.umirc.js（config.jsの）設定。

// REF：https://umijs.org/config/ 
エクスポートデフォルト{ 
  treeShaking：真、
  ルート：[ 
    { 
      パス： '/' 、
      成分： '../layouts/index' 、
      ルート：[ 
        {パス：「/ '成分' ../pages/index」} 
      ] 
    } 
  ]、
  プラグイン：[ 
    // REF：https://umijs.org/plugin/umi-plugin-react.html 
    [ ''海・プラグインが反応し、 { 
      antd：真、
      DVA：真、
      dynamicImport：偽、
      タイトル： 'umi_with_dva_test' 、
      DLL：偽、
      
      ルート：{ 
        除外する：[
           /コンポーネント\ // 、
        ]、
      }、
    }] 
  ] 
}

 

UIコードのレイアウトは、レイアウトにこだわっantd。

覚えておいてください：

レイアウト>ページ>コンポーネント

「antd」からインポート{レイアウト、メニュー、ブレッドクラム、アイコン} 。

CONST {サブメニュー} = メニュー。
CONST {ヘッダ、コンテンツ、サイダー} = レイアウト。

エクスポートデフォルト 機能（小道具）{
   リターン（
     <レイアウト> 
    <ヘッダクラス名= "ヘッダ"> 
      <DIVクラス名= "ロゴ" /> 
      < メニュー
        テーマ = "暗い" 
        モード = "水平" 
        defaultSelectedKeys = {[ '2' ]} 
        スタイル = {{lineHeight： '64px' }}
       > 
        <メニュー。
        <Menu.Itemキー= "2"> NAV 2 </Menu.Item> 
        <Menu.Itemキー= "3"> NAV 3 </Menu.Item> 
      </メニュー> 
    </ヘッダ> 
    <レイアウト> 
      <サイダー幅= {200}スタイル= {{背景： '#FFF'}}> 
        < メニュー
          モード = "インライン" 
          defaultSelectedKeys = {[ '1' ]} 
          defaultOpenKeys = {[ 'SUB1' ]} 
          スタイル = {{高さ：「100 ％」、borderRight：0 }}
         > 
          < サブメニュー
            キー = "SUB1"
            タイトル = {
               <スパン>
                <アイコンタイプ= "ユーザ" /> 
                subnav 1 
              </スパン> >
            }
           > 
            <Menu.Itemキー= "1">オプション1 </Menu.Item> 
            <Menu.Itemキー= "2">オプション2 </Menu.Item> 
            <Menu.Itemキー= "3">オプション3 </メニュー.Item> 
            <Menu.Itemキー= "4">オプション4 </Menu.Item> 
          </サブメニュー> 
          < サブメニュー
            キー = "SUB2" 
            タイトル = {
               <スパン> 
                <アイコンタイプ= "ラップトップ" /> 
                subnav 2 
              </スパン>             }
           
            <Menu.Itemキー= "5">option5 </Menu.Item> 
            <Menu.Itemキー= "6"> option6 </Menu.Item>

            <Menu.Itemキー= "7"> option7 </Menu.Item> 
            <Menu.Itemキー= "8"> option8 </Menu.Item> 
          </サブメニュー> 
          < サブメニュー
            キー = "SUB3" 
            タイトル = {
               <スパン> 
                <アイコンタイプ= "通知" /> 
                subnav 3 
              </スパン>             }
           > 
            <Menu.Itemキー= "9"> option9 </Menu.Item> 
            <Menu.Item = "10"> option10 </メニューキー。項目> 
            <Menu.Itemキー= "11"> option11 </Menu.Item>
          </サブメニュー> 
        </メニュー> 
      </サイダー>
 
            <Menu.Itemキー= "12"> option12 </Menu.Item> 
      <レイアウトスタイル= {{パディング： '0は24pxは24px'}}> 
        <ブレッドクラム・スタイル= {{マージン： '16pxに0'}}> 
          <Breadcrumb.Item>ホーム</Breadcrumb.Item> 
          <ブレッドクラム。項目>リスト</Breadcrumb.Item> 
          <Breadcrumb.Item>アプリケーション</Breadcrumb.Item> 
        </ブレッドクラム> 
        < コンテンツ
          スタイル = {{ 
            背景： '#FFF' 、
            パディング： 24 、
            マージン： 0 、
            minHeightプロパティ：「CALC （100VH - 141px「） 、
          }}
         > 
          {} props.children
        </コンテンツ> 
      </レイアウト> 
    </レイアウト> 
    </レイアウト>   ）。
}

 

最後のページ。

エクスポートデフォルト 関数（）{
   リターン（
     <DIV> 123 </ div>
  ）。
}