react中注意点

1 如何动态更改className？

<span className={`item ${itemData.isComplet?'line':''}`}>{itemData.title}</span>

特别注意${itemData.isComplet?'line':''}` ，不是${itemData.isComplet}?'line':''`

2 react如何配置less？

(1)安装less，less-loader

(2) 修改webpack.config.js配置，在webpack.config.js中新增如下代码：

const lessRegex = /\.less$/;

const lessModuleRegex = /\.module\.less$/;

在module:{rules:[]}数组中新增

{

              test: lessRegex,

              exclude: lessModuleRegex,

              use: getStyleLoaders(

                {

                  importLoaders: 3,

                  sourceMap: isEnvProduction

                    ? shouldUseSourceMap

                    : isEnvDevelopment,

                },

                'less-loader'

              ),

              sideEffects: true,

            },

            {

              test: lessModuleRegex,

              use: getStyleLoaders(

                {

                  importLoaders: 3,

                  sourceMap: isEnvProduction

                    ? shouldUseSourceMap

                    : isEnvDevelopment,

                  modules: {

                    getLocalIdent: getCSSModuleLocalIdent,

                  },

                },

                'less-loader'

              ),

            },

即可。

3 react如何设置module？避免样式冲突？

（1）我们在组件页面中引入样式文件如下（注意采用module.css/module.less/module.sass）写法

   import homeStyle from "./home.module.less"

function Home(){

return(

<div className={homeStyle['layout-container']}>

)

}

/home.module.less"文件css如下：

.layout-container {

    display: flex;

    flex-direction: column;

}

这样就可以通过homeStyle['layout-container']写法引入样式。避免每次采用驼峰

如果我们想改变当前页面的antd组件样式而不整体改变。可以在要更改的组件前面嵌套一层，然后加一个class类名，然后通过 自定义类名 :global  { antd样式名来更改 }

4 react中配置less和less-loader为什么预览结构中类名不生效？

今天遇到这个问题。检查了下在webpack.config.js中lessRegex和lessModuleRegex，但是依旧没有生效？检查了良久。终于找到了问题所在：getStyleLoaders

除了子webpack.config.js中配置

const lessRegex = /\.less$/;

const lessModuleRegex = /\.module\.less$/;

和module：{

{

              test: lessRegex,

              exclude: lessModuleRegex,

              use: getStyleLoaders(

                {

                  importLoaders: 2,

                  sourceMap: isEnvProduction && shouldUseSourceMap,

                },

                'less-loader'

              ),

              sideEffects: true,

            },

            {

              test: lessModuleRegex,

              use: getStyleLoaders(

                {

                  importLoaders: 2,

                  sourceMap: isEnvProduction && shouldUseSourceMap,

                  modules: true,

                  getLocalIdent: getCSSModuleLocalIdent,

                },

                'less-loader'

              ),

            },

}

还有一个要配置的：

需要在getStyleLoaders中添加less选项。

注意这里：

5 react中如何区分开发/测试和生产环境并配置不同的baseurl？

解法：（1）在根目录新建env.development/env.test/env.production文件

内容如下：

env.development：

REACT_APP_BASE_URL="http://xxxxx"
REACT_APP_ENV="development"

env.test：

REACT_APP_BASE_URL="http://xxxxx"
REACT_APP_ENV="test"

env.production：

REACT_APP_BASE_URL="http://xxxxxx"
REACT_APP_ENV="production"

注意：这里定义的环境变量只能以REACT_APP开头

（2）在package.json中的script作如下配置：

 "scripts": {

    "start": "cross-env REACT_APP_BASE_URL=http://xxxxxxa.com REACT_APP_ENV=development node scripts/start.js",

    "build:prod": "cross-env REACT_APP_BASE_URL=http://xxxxxx b.com REACT_APP_ENV=production node scripts/build.js",

    "build:test": "cross-env REACT_APP_BASE_URL=xxxxxx c.com REACT_APP_ENV=test node scripts/build.js",

    "test": "node scripts/test.js",

    "eject": "react-scripts eject"

  },

(3)我们在使用的时候如下：

process.env.REACT_APP_BASE_URL