React 小功能

react 解析标签

	showhtml = htmlString => {
        var html = { __html: htmlString };
        return <div dangerouslySetInnerHTML={html}></div>;
    }

点击dom元素，显示file文件筐（头像上传?）

// 点击事件
onFile = () => {
	const file = document.createElement('input')
	file.type = 'file'
	file.click()
}
// 头像上传
// 上传头像图片需转化为base64位
informationList= async(e)=>{ //base64
         //const { dispatch } = this.props;
        //const _this = this;
        var reader = new FileReader();
        reader.readAsDataURL(e.target.files[0]);
        Toast.loading("正在上传头像", 0);
        reader.onloadend = async (e) => {
            const params ={
                headimg:reader.result,
                type:1
            }
            const result = await home.xgheader(params);
            Toast.hide()
            if(result.code == 1){
                home.Usercenter({}).then((result) => {
                    if (result.code === 1) {
                        this.setState({
                            data: result.data
                        })
                    }
                })
                Toast.info('上传成功')
            }else{
                Toast.info('上传失败，请重新上传',1.5)
            }
        }
    }

文件夹内容标红

export const highlightContentReplace = (message, keyword, isTitle) => {
  if (!keyword) {
    return 0;
  }
  const reg = /((http|https):\/\/\S+\b)/gi;
  let subStr = '';
  if (reg.test(message)) {
    subStr = RegExp.$1;
  }
  if (subStr) {
    let messageList = message.split(subStr);
    let newMessageList = messageList.map(item => {
      return contentReplace(item);
    })
    return newMessageList.join(subStr);
  } else {
    return contentReplace(message);
  }
  function contentReplace(message) {
    let reMessage = message;
    if (isTitle) {
      const reg = new RegExp(`${keyword}`, 'gi');
      reMessage = message.replace(reg, "<span style='color: red;'>$&</span>");
    } else {
      try {
        const hlValue2 = new RegExp(`(\\W+)(${keyword})(\\W+)`, 'gi');// 非数字字母下划线
        const hlValue3 = new RegExp(`(\\W+)(${keyword})$`, 'gi');// 以keyword结束的情况
        const hlValue4 = new RegExp(`^(${keyword})(\\W+)`, 'gi');// 以keyword开始的情况
        const hlValue5 = new RegExp(`^(${keyword})$`, 'gi');
        reMessage = message.replace(hlValue2, "$1<span style='color: red;'>$2</span>$3");
        if (hlValue3.test(reMessage)) {
          reMessage = message.replace(hlValue3, "$1<span style='color: red;'>$2</span>");
        }
        if (hlValue4.test(reMessage)) {
          reMessage = message.replace(hlValue4, "<span style='color: red;'>$1</span>$2");
        }
        if (hlValue5.test(reMessage)) {
          reMessage = message.replace(hlValue5, "<span style='color: red;'>$1</span>");
        }
      } catch (e) {
        return reMessage;
      }
    }
    return reMessage;
  }
}

antd 按需加载

webpack.config.js

398行

[
	"import",
	{libraryName: "antd", style: 'css'}
]


* antd 按需加载
1. 安装 babel-plugin-import
2. 配置webpack-config.js
[
  "import",
  { libraryName: "antd", style: 'css' }
]

不需要引入全局样式
[
  "import",
  { libraryName: "antd", style: 'css' }
]