💪 optimize: 优化代码

src/components/knockGold/wangEditor.jsx

@@ -1,65 +1,59 @@
-import React from 'react';
+import React from "react"
-import Editor from 'wangeditor';
+import Editor from "wangeditor"
-import './index.less';
+import "./index.less"
 export default class wangEditor extends React.Component {
   constructor(props) {
-    super(props);
+    super(props)
     this.state = {
-      editorHtml: '',
+      editorHtml: "",
       count: 0
-    };
+    }
   }
   componentDidMount() {
-    let self = this;
+    let self = this
-    const editor = new Editor('#wangeditorDom');
+    const editor = new Editor("#wangeditorDom")
-    this.setState({ editor });
+    this.setState({ editor })
-    editor.config.colors = ['#696969', '#9093a2', '#fgddbb', '#e3e7eb'];
+    editor.config.colors = ["#696969", "#9093a2", "#fgddbb", "#e3e7eb"]
-    editor.config.pasteText = true;
+    editor.config.pasteText = true
     // 设置编辑区域高度为 500px
-    editor.config.height = 200;
+    editor.config.height = 200
-    editor.config.showFullScreen = false;
+    editor.config.showFullScreen = false
-    editor.config.menus = [
+    editor.config.menus = ["bold", "foreColor", "italic", "indent", "link", "justify"]
-      'bold',
-      'foreColor',
-      'italic',
-      'indent',
-      'link',
-      'justify'
-    ];
 
     // 注意，先配置 height ，再执行 create()
     // 注意，先配置 height ，再执行 create()
     editor.config.onchange = function (newHtml) {
-      var text = editor.txt.text();
+      var text = editor.txt.text()
       if (text.length == 0) {
         //没有文字
-        self.props.setEdittext('');
+        self.props.setEdittext("")
       }
       if (text.length > self.props.limitLength) {
-        let str = text.slice(0, self.props.limitLength);
+        let str = text.slice(0, self.props.limitLength)
-        self.setState({ editorHtml: str });
+        self.setState({ editorHtml: str })
-        editor.txt.html(str);
+        editor.txt.html(str)
-        self.props.setEdittext(str);
+        self.props.setEdittext(str)
-        return;
+        return
       }
-      self.setState({ count: text.length });
+      self.setState({ count: text.length })
-      self.setState({ editorHtml: newHtml });
+      self.setState({ editorHtml: newHtml })
-      self.props.setEdittext(newHtml);
+      self.props.setEdittext(newHtml)
-    };
+    }
 
-    editor.create();
+    editor.create()
     //列表悬浮富文本
-    editor.txt.html(this.props.text);
+    const clr = setTimeout(() => {
+      editor.txt.html(this.props.text)
+      clearTimeout(clr)
+    }, 500)
   }
 
   render() {
     return (
-      <div className='countBox_par'>
+      <div className="countBox_par">
-        <div id='wangeditorDom' style={{ width: this.props.width }}></div>
+        <div id="wangeditorDom" style={{ width: this.props.width }}></div>
-        <p className='countBox'>
+        <p className="countBox">{this.state.count + "/" + this.props.limitLength}</p>
-          {this.state.count + '/' + this.props.limitLength}
-        </p>
       </div>
-    );
+    )
   }
 }

src/components/redPackets/wangEditor.jsx

@@ -42,7 +42,10 @@ export default class wangEditor extends React.Component {
 
     editor.create()
     //列表悬浮富文本
-    editor.txt.html(this.props.text)
+    const clr = setTimeout(() => {
+      editor.txt.html(this.props.text)
+      clearTimeout(clr)
+    }, 500)
   }
 
   render() {

src/components/redPackets/zfb-mobileComponent.jsx

@@ -56,7 +56,7 @@ export default ({ data }) => {
           <p className="form-note">您可在支付宝的个人信息中查看【支付宝账号】</p>
           <img
             src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/zfb-red-but.png"
-            class="but"
+            className="but"
             alt=""
           />
         </div>