react 项目问题记录

react 项目问题记录

1. 使用create-react-app 创建项目，无法引入less文件？

​ 暴露出webpack相关的配置文件 ： npm run eject

​ 安装less 和less-loader：npm install less-loader less

​ 修改webpack 配置：/\.css$/ 改为 /\.(css|less)$/

// 增加
{
      loader: require.resolve('less-loader')
 }

2. antd 的样式不生效？

​ 安装 babel-plugin-import

​ 在 webpack文件中修改

​

            {
              test: /\.(js|mjs|jsx|ts|tsx)$/,
              include: paths.appSrc,
              loader: require.resolve('babel-loader'),
              options: {
                customize: require.resolve(
                  'babel-preset-react-app/webpack-overrides'
                ),

                plugins: [
                  [
                    require.resolve('babel-plugin-named-asset-import'),
                    {
                      loaderMap: {
                        svg: {
                          ReactComponent:
                            '@svgr/webpack?-svgo,+titleProp,+ref![path]',
                        },
                      },
                    },
                  ],
                  //增加antd的样式
                  ['import', { libraryName: 'antd', style: 'css' }],
                ],
         
                cacheDirectory: true,
                cacheCompression: isEnvProduction,
                compact: isEnvProduction,
              },
            },
            
            //修改babelrc为true
             loader: require.resolve('babel-loader'),
              options: {
                babelrc: true,
                ...

3. 报错跨域问题：Error: A cross-origin error was thrown. React doesn’t have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information.

引发问题的原因：JSON调用parse方法时参数为undefined

const user = JSON.parse(undefined);

4. 使用react-router-dom 报错：Each child in a list should have a unique “key” prop.

解决： 在标签上使用唯一标识的key

<Route path={item.key}
                      key={item.key}
                      exact
                      component={AllComponent[item.component]}/>

5. ant-design 国际化问题

在全局配置：使用ConfigProvider配置，日期可以显示中文

import {ConfigProvider} from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
const {Content} = Layout;
moment.locale('zh');
state = {
        locale: zhCN
    };

 render() {
        return (
            <ConfigProvider locale={this.state.locale}>
            .....
            </ConfigProvider>)
}

6. tinymce-rect 5 设置语言问题

1. 下载language包，地址：https://www.tiny.cloud/get-tiny/language-packages/
2. 因为tinymce5使用的是CDN，所以需要生成url
3. 本地生成URL：将下载好的zh_CN.js 放到目录D:/tinycme/langs下
			  全局安装server：npm install -g server
			  找到langs目录下，打开cmd
			  输入 server -p 8080
			  直接访问 http://localhost:8080/zh_CN.js即可访问到
4. 在Editor初始化下添加：
init={{
        language_url: 'http://localhost:8080/zh_CN.js',
        language: 'zh_CN',
    }}
 5. 如果有服务器直接放到服务器上

7. 使用PageHelper 获取total数据错误

使用PageHelper 获取total 数据时总是会获取到当前页的总条数

//核心代码如下：
Page page = PageHelper.startPage(newsParam.getCurrentPage(), newsParam.getPageSize());
...
List<EtNews> etNews = newsMapper.getNewsByItems(newsParam);
List<NewsInfo> newsInfoList = getNewsInfos(etNews)
PageInfo<NewsInfo> newsInfoPageInfo = new PageInfo<>(newsInfoList);
return new PageResponse<>(ResponseStatus.SUCCESS, StringUtils.EMPTY, newsInfoPageInfo.getList(), newsInfoPageInfo.getTotal());

原因分析：在PageInfo源码中可以看出如果new PageInfo<>()参数传入的是list时，total的值为list的size

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ymem4ph3-1583723115901)(C:\Users\leiqi\AppData\Roaming\Typora\typora-user-images\1571282170424.png)]

所以，如果上述代码传入的是mapper查询完的值etNews，取值total则正确，转换为newsInfo的List之后，再传入pageInfo，取值total错误，应该使用 第一行 page的total属性，即可取到正确的值

Page page = PageHelper.startPage(newsParam.getCurrentPage(), newsParam.getPageSize());
...
return new PageResponse<>(ResponseStatus.SUCCESS, StringUtils.EMPTY, newsInfoPageInfo.getList(), page.getTotal());