解决antd design的Modal组件弹出卡顿的问题

Posted 2021-03-16 xy-ouyang

代码：

import React from ‘react‘
import ReactDOM from ‘react-dom‘
import Axios from "axios";
import copy from ‘copy-to-clipboard‘
import { Input, Button, Modal, message, Icon } from ‘antd‘
import ‘../static/css/input.css‘
import ‘../static/css/button.css‘
import ‘../static/css/modal.css‘
import ‘../static/css/message.css‘
import ‘../static/css/icon.css‘
import ‘../static/css/decrypt.css‘

const { TextArea } = Input;

export default class Decrypt extends React.Component {
    state = {
        link: ‘‘,
        secretKey: ‘‘,
        content: ‘‘
    }

    render() {
        return (
            <div id="decrypt-container" className=‘decrypt-container‘>
                <table className=‘decry-table‘>
                    <tbody>
                    <tr>
                        <td><Input placeholder="Please Input the Link" onChange={e => this.linkInputChangehandler(e)} /></td>
                        <td><Button type="primary" onClick={this.buttonClickHandler}>Confirm</Button></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        )
    }

    linkInputChangehandler = e => {
        const link = e.target.value
        this.setState({ link })
    }

    buttonClickHandler = () => {
        Modal.confirm({
            title: ‘Resource extraction‘,
            icon: <Icon type="info-circle" />,
            content: <Input placeholder="Please Input the Secret Key" ref={input => this.contentSecretKeyInput = input} />,
            okText: ‘Confirm‘,
            cancelText: ‘Cannel‘,
            onOk: this.confirm
        })
    }


    confirm = () => {
        const secretKey = this.contentSecretKeyInput.state.value
        let { link } = this.state
        link = link.substring(link.lastIndexOf(‘/‘) + 1)
        // console.log(`secretKey=${secretKey}, link=${link}`)

        Axios.get(‘/api/encryption?id=‘ + link + ‘&key=‘ + secretKey).then(res => {
            if (res.data.code === 0) {
                let content = res.data.data.content
                this.setState({ content })
                //message.success(‘Successful‘);
                ReactDOM.render(
                    <div>
                        <span className=‘content-info‘>The content you extract is:</span>
                        <TextArea rows={8} value={this.state.content} />
                        <Button className=‘copy-button‘ type="primary" onClick={this.buttonCopyHandler}>Copy</Button>
                    </div>,
                    document.getElementById(‘decrypt-container‘),
                );
            } else {
                // error message info
                if (res.data.data && res.data.data.incr)
                    message.error(`${res.data.message}, only ${res.data.data.incr} input opportunities left`);
                else
                    message.error(res.data.message);
            }
        })
    }

    buttonCopyHandler = () => {
        // Get the value of the `value` attribute of the <Input> component
        copy(this.state.content)
    }

}

 

解决方案1：

　　将导入antd组件css样式的代码删除，改为；

import "antd/dist/antd.css"
// import ‘../static/css/input.css‘
// import ‘../static/css/button.css‘
// import ‘../static/css/modal.css‘
// import ‘../static/css/message.css‘
// import ‘../static/css/icon.css‘
import ‘../static/css/decrypt.css‘

　　但是这样不能实现按需导入，加载了全部的 antd 组件的样式（gzipped 后一共大约 60kb）。

 

解决方案1：按需导入antd组件css样式

　　参考 https://ant.design/docs/react/use-with-create-react-app-cn