前端开发小问题总结

React项目

  1. 由于我是自己使用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
  1. 使用组件会导致里面的组件渲染两次,例如我定义了table组件,这时会连续请求两次接口,删除这个组件就可以了

其他问题

  1. 安装sass报python错误,切换镜像解决这个问题
npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

TinyMCE问题

  1. 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问题

  1. 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>Documenttitle>
    <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>

你可能感兴趣的:(web开发遇到的问题,javascript)