正常情况下:
<Dialog
visible={visible}
style={{ height: '590px' }}
width={840}
onCancel={onCloseHandler}
onClose={onCloseHandler}
onOk={handleSubmit}
noFooterLine
destroyOnClose
noHeadLine
title={
<div>
<p>{getLocale('Rep_NewS_Evaluation')}</p>
<span className="titleDesc">{getLocale('Rep_NewS_ComhenRatin')}</span>
</div>
}
onClose={onCloseHandler}
/>
1.当图片不能在该组件铺满的时候,给图片加一个display:block。
2.当不需要取消和确定按钮,noFooter 或者加上 footer=""
3.当不需要上边的title栏的时候,noHeader 或者加上 header="",需要的时候则加上header={},并且{}里可以写<div>等标签,如上所示。
4.当不需要右上方的关闭按钮的时候,加上noCloseIcon,
5.也可以额外加上新的className:extraClass = [],
6.可以不把要展示的内容写在><之间。可以写成以下的格式。
modalRender={() => (
<div className={`${prefixCls}__content`}>
<button
className="close-btn tu-icon-close"
onClick={onCloseDialog}
/>
<button className="confirm-btn">
<img
className="animate-rubberBand"
onClick={onOrderControllerClick}
src={require("../../img/advertisement-btn-en.png")}
alt="立即预约"
/>
</button>
</div>
)}
7.也可以加上动画animation="slide-fade"
8.destroyOnClose :这个属性就是说在Dialog关闭的时候可以把元素清除,下次打开的时候重新渲染,那样表单填的数据就也会被清空掉。
9.forceRender: 该属性用于控制对话框是否强制渲染。当 forceRender 设置为 true 时,无论对话框是否可见,都会将对话框内容进行渲染。这意味着即使对话框没有显示出来,其内容也会被渲染并存在于 DOM 中。而当 forceRender 设置为 false 或未设置时,则对话框只有在可见时才会进行渲染。这可以提高性能,避免不必要的渲染。需要注意的是,如果对话框内部包含有动态内容或受到其他因素影响的组件,可能需要将 forceRender 设置为 true,以确保内容正常渲染和更新。但同时要考虑到潜在的性能影响。