Мерцающая проблема с antd - PullRequest
Новая
       11

Мерцающая проблема с antd

0 голосов
/ 14 сентября 2018

Я использую компоненты Ant Design для некоторых интерфейсов в приложении React, но замечаю проблему с модалами и подсказками.Обычно, когда модал пустой или простой - например, имеет только текст, он будет отображаться правильно, но если на нем больше элементов (в сценарии производства), он мигает.

Вы можете наблюдать за мерцающим вопросом здесь: https://drive.google.com/file/d/1ODsj-aGz6saHJLXLI7sJaesgHKKPrvD2/view

Надеемся получить ответы на некоторые вопросы :-) Спасибо!Переменная состояния visibleRequest запускается true кнопкой в ​​интерфейсе.РЕДАКТИРОВАТЬ: В соответствии с просьбой вот мой код: 

renderRequests=()=>{
        const data = [
            {name:"Request #1",description:"Request description",status:"0"},
            {name:"Request #1",description:"Request description",status:"1"},
            {name:"Request #1",description:"Request description",status:"2"}
        ];
        const handleOk = ()=>{
            console.log("Submitted");
            this.setState({visibleRequest:false})
        }
        const handleCancel = ()=>{
            this.setState({visibleRequest:false})
        }
        return(
            <div style={{overflowY:"scroll"}}>
            <Modal
                title="Submit new request"
                visible={this.state.visibleRequest}
                onOk={handleOk}
                onCancel={handleCancel}
                >
                <Input placeholder="Title"/>
                <Input.TextArea placeholder="Description"/>
                <DatePicker/>
            </Modal>
                <List 
                    dataSource={data}
                    renderItem={item=>{
                        return(
                            <List.Item>
                                <List.Item.Meta
                                title={item.name}
                                description={item.description}
                                />
                                {item.status==1?<Tooltip title="Request approved">
                                <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
                                </Tooltip>:
                                item.status==2?<Icon type="close-circle" theme="twoTone" twoToneColor="#7F1C43" />:<Icon type="ellipsis" theme="outlined" />}
                            </List.Item>
                        )
                }}/>
                <Pagination total={20}/>
            </div>
        )
    }
...