ReactではLayuiを使います

3265 ワード
Javascript
Layuiはまだ使いやすいですが、どうやってReactでLayuiを使いますか?最初はまだ小さな問題にぶつかりました.資料を探して解決しました.
https://fly.layui.com/jie/27470/
まとめてみます.まずindexです.リガで
そして、 っているあのコンポーネントに のコメントを って、layerがグローバル であることを します.
//global layer*/
のこの は に で、antdを って、layerのポップアップ を って、layerと きます).
ANt design:https://ant.design/components/button-cn/
layer:http://layer.layui.com/
import React, { Component } from 'react';
import $ from 'jquery';
import 'antd/dist/antd.css'
import { Button,Table } from 'antd';

class LayerTest extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource :[{
                key: '1',
                name: '   ',
                age: 32,
                address: '       1 '
              }, {
                key: '2',
                name: '   ',
                age: 42,
                address: '       1 '
              }],
            columns:[{
                title: '  ',
                dataIndex: 'name',
                key: 'name',
              }, {
                title: '  ',
                dataIndex: 'age',
                key: 'age',
              }, {
                title: '  ',
                dataIndex: 'address',
                key: 'address',
              }]
          };
    }

    showLayer(){
        /* global layer */
        //   
        layer.confirm('          ？', {
            btn: ['  ','  '] //  
        }, function(){
            layer.msg('     ', {icon: 1});
        }, function(){
            layer.msg('     ', {
            time: 20000, //20s     
            btn: ['   ', '   ']
            });
        });
    }

    showLayer2(){

        //   
        //   
        /* global layer */
        layer.open({
            type: 1,
            skin: 'layui-layer-rim', //    
            area: ['420px', '240px'], //  
            content: $('#test')
        });
    }

    showAlert(){
        //     
        /* global layer */
        layer.alert('    ，       ', {
            skin: 'layui-layer-molv' //    
            ,closeBtn: 0
        }, function(){
            layer.alert('    style', {
            skin: 'layui-layer-lan'
            ,closeBtn: 0
            ,anim: 4 //    
            });
        });
    }

    render() {
        return (
            

                
                
                

                    

                        
                        
                        
                        
                    

                    

                        
        );
    }
}


export default LayerTest;  


                                    
                                    
                                    
                                    
                                

                                    PWA初探侦整理