antd自定义设置title和footer

最新推荐文章于 2022-04-02 14:38:15 发布

我好菜呐

最新推荐文章于 2022-04-02 14:38:15 发布

阅读量8.4k

点赞数 8

分类专栏：日常记录文章标签： js reactjs

本文链接：https://blog.csdn.net/yang___yang_/article/details/114286005

版权

日常记录专栏收录该内容

25 篇文章

订阅专栏

项目中有使用到antd的组件库中的modal对话框，需求中的标题和底部按钮都是需要自定义的，记录在此：

modal中的title属性支持string和ReactNode：

title={[<div style={{color:'red'}}>我是标题</div>...可设置多个]}       //同时也可以设置样式了

底部同理：footer属性支持string和ReactNode：底部可以只设置一个按钮用作返回


footer={[<Button key="back" onClick={() => this.setIsVisible(false)}>返 回</Button>]}   //可设置样式

例如：

<Modal
          title={[<div style={{color:'red'}}>我是标题</div>]}
          visible={this.state.modal2Visible}
          footer={[<Button key="back" onClick={() => this.setIsVisible(false)}>返 回</Button>]}
        >
          <p>some contents...</p>
          <p>some contents...</p>
          <p>some contents...</p>
        </Modal>

顺手点个赞呐呐呐呐~~~~（体力-1）