小白文章之---React框架学习(六)使用第三方layui插件

layui插件提供了很多的样式和组件，在使用的是可以直接在React的js文件中导入样式，但是在插件中封装了小模块，使用时通过layui去调用这些小模块(官方的文档)
首先展示我第一次思考的代码，这里使用日期选择模块

这是一个错误的演示

1、安装layui插件：npm install react-layui-layer --save
2、在自己的js文件中调用时间模块

//导入layui
import Layer from 'react-layui-layer';
//调用时间模块
export default function DateTime1() {
    Layer.use('laydate', function(){
        let laydate = Layer.laydate;
        //日期范围
        laydate.render({
            elem: '#test6',
            range: true
        });
    });
}

3、在自己的插件中去调用这个模块

// 时间管理的组件，当前组件的内容为：点击时间选择框，弹出选择的格式为：显示当前月和下一个月的日期
import React from 'react';
import '../libs/layui/css/layui.css';
import datetime from "../libs/js/datetime1";

class DateTime1 extends React.Component {

    render() {
        return (
            <div className="layui-inline">
                <label className="layui-form-label">日期范围</label>
                <div className="layui-input-inline">
                    <input type="text" className="layui-input" id="test6" placeholder="-"/>
                </div>
            </div>
        );
    }
    //调用
    componentDidMount() {
        datetime();
    }
}

export default DateTime1;

4、然后在界面中添加这个组件进行展示
但是这种写法，在运行会抛出异常，如下图

在经过几次重写测试后，终于找到一种不是办法的办法

正确的演示

1、编写自己的组件代码，不用去调用模块
2、在要展示界面导入layui的包，然后编写js代码调用模块

<script src="layui/layui.js" charset="UTF-8"></script>
<script src="layui/datetime1.js">
    layui.use('laydate', function () {
        let laydate = layui.laydate;
        laydate.render({
            elem: '#test6',
            range: true
        });
    })
</script>

最后在界面展示成功，当然这是一个不是方法的方法，不是很符合规范，不建议这么使用，但是layui对React不是很适配，所以不得不这么使用