Reactダイナミックインポートおよびcssモジュール化

reactではコンポーネントに入っていないように見えますが、すでにコンポーネントの中に入っています.次は私が前に出会った問題です.1、webFlagはtrueですが、本来はpc端子(前者)に入るべきですが、モバイル端子も一緒にロードされています.

  <classroomContext.Provider value={this.state} >
     <div className="App">
        {webFlag === true ? <WebLiveShow /> : <HWhiteWebFromApp />}
        {webFlag === true ? <WebWhiteWebFromApp /> : <HSendAndShow />}
        {webFlag === true ? <WebSendAndShowFromApp /> : <HLiveShow />}
      </div>
  </classroomContext.Provider>

2、contextの影響だと思っていたが、削除してもそうではない.reactがすべてのcssファイルをロードしたためスタイルが衝突したと推測し、最後にimportに対応するtsxさえあれば、このコンポーネントを使用しなくても、そのコンポーネントにimportのコンポーネントとimportのcssファイル3をインポートし、どのようにimportに基づいてファイル方式を動的に導入するかを発見した.

import { lazy, LazyBoundary } from 'react-imported-component';
const webFlag = location.search.indexOf('&h5') !== -1 ? false : location.search.indexOf('&web') !== -1 ? true : 2; //      pc       true pc
const Component = lazy(() => webFlag ? import('./components/h5/white-web/white-web') : import('./components/h5/aftersendmessage/SendAndShow'));
import { Suspense } from 'react';
const ClientSideOnly = (): any => (
  <Suspense fallback>
    <Component />
  </Suspense>
);

方式2

import { Suspense, lazy } from 'react';
const webFlag = location.search.indexOf('&h5') !== -1 ? false : location.search.indexOf('&web') !== -1 ? true : 2; //      pc       true pc
const Component = lazy(() => webFlag ? import('./components/web/WebIndex') :  import('./components/h5/HIndex'));
  public render(): React.ReactNode {
    return (
      this.state.power === false || webFlag === 2 ? <div>     </div> :
      <Suspense fallback>
        <Component result={this.state} />
      </Suspense>
    );
  }

方式三(umi)

import dynamic from 'umi/dynamic';
//               react  ，webpack       
 const Component: any = dynamic({
  loader: () => webFlag ? import('./components/web/WebIndex') : import('./components/h5/HIndex'),
  loading: () => null
});

public render(): React.ReactNode {
    return (
      this.state.power === false || webFlag === 2 ? <div>     </div> :
      <Component result={this.state} />
    );
  }

しかし、以上の3つはumiを使用していない場合は可能ですが、umiを使用する場合は、対応するスタイルをすべてロードし、umiのコンパイルが少し異なることに気づきました.

const webFlag = location.search.indexOf('&h5') !== -1 ? false : location.search.indexOf('&web') !== -1 ? true : 2; //      pc       true pc
const Component = lazy(() => webFlag ? import('./components/web/WebIndex') :  import('./components/h5/HIndex'));

このコードではwebFlagを判断する前に怠惰なロードを実行しますが、直接trueやfalseであればいいのですが、死ぬことはできませんので、後で諦めました.

const Component = lazy(() => true ? import('./components/web/WebIndex') :  import('./components/h5/HIndex'));

css-loaderに変更(umiデフォルトはcss modulesを開く)reactを直接使用する場合は、開く必要があります

react       css      ，              ，           。

   css    ：

.css、.less、.scss        ，            ，         loader       css-loader，    modules   ，     css    ：
.css    ：
{ test: /\.css$/, use: ['style-loader', 'css-loader?modules'] }
.less    ：
{ test: /\.less$/, use: ['style-loader', 'css-loader?modules', 'less-loader'] }
.scss    ：
{ test: /\.scss$/, use: ['style-loader', 'css-loader?modules', 'sass-loader'] }

          ：

          ：
import styles from '        '
        ：
{ /*        */ }
<div className={ styles.   }>         </div>
{ /*       ,      -     ，  [' '] */ }
<div className={ [styles.  1, styles.  1].join(' ') }>         </div>
<div className={styles.item}>
  <h1 className={styles['aa-bb']}>h1</h1>
  <h2 className={styles['aa-cc']}>h2</h2>
</div>


:local()   :global()
         ，       :local()     ，      ；
     :global()     ，       ，         ；
  ：           Id           ，             ！(          ，       )