开发中遇到的问题ing...

小小小少年_

已于 2022-10-26 17:12:49 修改

阅读量404

点赞数

分类专栏：前端 react 文章标签： reactjs

于 2020-11-26 17:12:02 首次发布

本文链接：https://blog.csdn.net/weixin_49293345/article/details/110197065

版权

前端同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

react

12 篇文章 1 订阅

订阅专栏

1.多行文本超出显示省略号

无效

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;      /* 可以显示的行数，超出部分用...表示*/
-webkit-box-orient: vertical;

解决：两行注释很重要

overflow:hidden; 
text-overflow:ellipsis; 
display:-webkit-box; 
/* autoprefixer: off */ 
-webkit-box-orient:vertical; 
/* autoprefixer: on */ 
-webkit-line-clamp:2;

原因： webpack打包后-webkit-box-orient会被移除，autoprefixer会自动移除老式过时的代码，所以需要添加注释关闭autoprefixer,但是如果有清除注释的插件,请将该插件设为false,否则不生效。

单行

overflow: hidden;    
text-overflow: ellipsis;//超出部分以省略号显示
white-space: nowrap;
width: 20em;  // 固定宽度

2.TypeError: this.getOptions is not a function

react项目安装了less-loader模块之后报错

原因： less-loader安装的版本过高
解决方案：
1.npm uninstall less-loader
2.npm install less-loader@5.0.0

3.react项目中使用react-app-rewired配置基本的环境

1.安装 react-app-rewired 和 customize-cra
2.在根目录下新建一个config-overrides.js文件

const { override }=require('customize-cra')
module.exports=override()

3.修改package.json中启动方式

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-app-rewired eject"
},

4.配置less与antd
安装less 与 less-loader
安装antd 与 babel-plugin-import

const {
  override,
  addLessLoader,
  fixBabelImports
}=require('customize-cra')

module.exports=override(
  addLessLoader({
    javascriptEnabled:true,
    modifyVars: { '@primary-color': '#f60' } // 主题色
  }),
  fixBabelImports('import',{
   	libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  })
)

使用less报错参照问题2

借鉴：https://blog.csdn.net/weixin_44759289/article/details/105348131

4.base64加密解密，中文乱码问题

通常的方法是通过 window.btoa() 方法对源数据进行编码, 然后接收方使用 window.atob() 方法对其进行解码, 从而得到原数据.

由于btoa 方法仅支持 ASCII 编码, 我们在转换中文的时候就需要先将中文转换为ASCII字符序列，再通过 btoa 进行 base64 编码, 从而实现『曲线救国』。

转换ASCII字符序列的方法我们可以借助于 encodeURIComponent 和 decodeURIComponent 这两个方法完成.

// 编码
window.btoa(encodeURIComponent('编码内容'))

// 解码
decodeURIComponent(window.atob('解码内容'))

通过以上方法处理之后发现中文可以正常解析出来了

5.英文内容整齐划一

word-wrap: break-word;
word-break: break-all;
text-align: justify;

6.处理手机空气刘海屏

body {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
  // padding-bottom: constant(safe-area-inset-bottom);
  // padding-bottom: env(safe-area-inset-bottom);
  padding-left: constant(safe-area-inset-left);
  padding-left: env(safe-area-inset-left);
  padding-right: constant(safe-area-inset-right);
  padding-right: env(safe-area-inset-right);
}

7.node-sass 编译慢的解决方案

项目根目录下加个.yarnrc文件
写入：sass_binary_site “https://npm.taobao.org/mirrors/node-sass/”

8.umi项目使用.scss编写样式

umi项目默认是支持css,less的，但是要使用scss还需要自己手动安装一个包 @umijs/plugin-sass
如果是ts,还需要全局引入scss,
declare module ‘*.scss’;

9.response响应状态码集中处理

function codeMapsMsg(response: any): string {
  let message = '连接服务器失败!';
  // 当响应异常时做一些处理
  if (response) {
    switch (response.status) {
      case 400:
        message = '请求错误(400)';
        break;
      case 401:
        message = '未授权，请重新登录(401)';
        break;
      case 403:
        message = '拒绝访问(403)';
        break;
      case 404:
        message = '请求出错(404)';
        break;
      case 408:
        message = '请求超时(408)';
        break;
      case 500:
        message = '服务器错误(500)';
        break;
      case 501:
        message = '服务未实现(501)';
        break;
      case 502:
        message = '网络错误(502)';
        break;
      case 503:
        message = '服务不可用(503)';
        break;
      case 504:
        message = '网络超时(504)';
        break;
      case 505:
        message = 'HTTP版本不受支持(505)';
        break;
      default:
        message = `连接出错(${response.status})!`;
    }
  }

  return message;
}

10.页面置灰样式设置

 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);
 -ms-filter: grayscale(100%);
 -o-filter: grayscale(100%);
 filter: grayscale(100%);
 filter: gray;
 filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

11. process is not defined

在这里插入图片描述

参考链接 https://stackoverflow.com/questions/70368760/react-uncaught-referenceerror-process-is-not-defined

解决办法
方法1.升级到 react-scripts v5

方法2.
如果升级到react-scriptsv5 对您不起作用，您还可以尝试另一种解决方法，即 pin react-error-overlayto version 6.0.9：
将此添加到您的 package.json

yarn add -D react-error-overlay@6.0.9

"resolutions": {
  "//": "See https://github.com/facebook/create-react-app/issues/11773",
  "react-error-overlay": "6.0.9"
}

删除您的yarn.lockor package-lock.json，然后再次安装您的依赖项。

方法3.
webpack 插件

plugins:[
  new webpack.DefinePlugin({
      process: {env: {}}
  })
]

或customize-cra用户 https://github.com/facebook/create-react-app/issues/11773#issuecomment-1042528090

react-scripts: 5.0.0
webpack: 5.64.4

// config-overrides.js
const webpack = require('webpack');
const { override, addWebpackPlugin } = require('customize-cra');

module.exports = override(
  addWebpackPlugin(
    new webpack.DefinePlugin({
      process: { env: {} },
    })
  )
);

12.解决safari某些输入框右侧出现icon

// safari 解决某些输入框右侧出现icon
input {
  &::-webkit-credentials-auto-fill-button {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
  }
  &:focus::-webkit-contacts-auto-fill-button {
    visibility: hidden;
  }
}