Я использую компоненты 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>
)
}