前端开发小问题总结

程序员超超

已于 2023-11-23 21:33:13 修改

阅读量681

点赞数 1

分类专栏： web开发遇到的问题文章标签： javascript

于 2023-06-11 21:20:52 首次发布

本文链接：https://blog.csdn.net/weixin_45609589/article/details/131158096

版权

web开发遇到的问题专栏收录该内容

29 篇文章 0 订阅

订阅专栏

React项目

由于我是自己使用webpack配置的项目，然后出现了这个报错

TS2786: ‘ConfigProvider’ cannot be used as a JSX component.

这里主要是cannot be used as a JSX component.这句话。意思是这个组件不能作为一个jsx组件。

解决这个问题是react和react-router-dom这些包的类型声明的版本不对引起的，需要安装一致的版本就能解决上面的问题：
npm

npm install --save-dev @types/react@latest @types/react-dom@latest
npm install react@latest react-dom@latest

yarn

yarn add @types/react@latest @types/react-dom@latest --dev
yarn add react@latest react-dom@latest

使用<React.StrictMode>组件会导致里面的组件渲染两次，例如我定义了table组件，这时会连续请求两次接口，删除这个组件就可以了

其他问题

安装sass报python错误，切换镜像解决这个问题

npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

TinyMCE问题

TinyMCE如何拦截粘贴事件，对粘贴的内容进行过滤，地址在这里

.....
import 'tinymce/plugins/paste';
...
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'paste',
  menubar: 'edit',
  toolbar: 'paste',
  paste_preprocess: function(plugin, args) {
    console.log(args.content);
    args.content += ' preprocess';
  }
});

使用paste_preprocess可以解决这个问题，这里需要注意的是plugins必须配置paste这一项，这里需要注意plugins的paste需要自己导入import ‘tinymce/plugins/paste’;

css问题

css设置input输入框placeholder时候，placeholder下沉

查看input是否有设置font-size，可能是一些属性没设置全，下面是一个完整demo

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      input {
        border: none;
        width: 255px;
        height: 26px;
        box-sizing: border-box;
        caret-color: #15a5fe;
        color: #423e5b;
        line-height: 26px;
        font-size: 18px;
        outline: none;
      }
      input::-webkit-input-placeholder {
        font-weight: 400;
        font-size: 18px;
        line-height: 26px;
        color: #cecece;
      }
    </style>
  </head>
  <body>
    <input type="number" placeholder="请输入手机号" />
  </body>
</html>