Badge徽标数

消息通知带数字

TodoList.js

// ------------------外部资源
import React, { Component } from 'react';
import { Badge } from 'antd';
import { NotificationOutlined } from '@ant-design/icons';

// ------------------内部私有
import './App.css'

class TodoList extends Component {
  render() {
    return (
      <div>
        <Badge count={9} size="small">
          <NotificationOutlined style={{fontSize:20,color:'black'}}/>
        </Badge>
      </div>
    )
  }
}

export default TodoList

App.css (引入antd的样式)

@import '~antd/dist/antd.css';

总结：

1. 当count里的值为0的时候，消息提示默认不展示，添加参数showZero，消息会展示。
2. 当count的值超过99的值时，会展示成99+，因为当count的值大于overflowCount（封底数值）的值，会展示成`${overflowCount}+`这种形式，overflowCount的默认值为99。可以给overflowCount赋值，从而控制展示成(XX+)，例如：overflowCount={1000}，当count>overflowCount,展示：1000+。
3. offset={[left, top]}设置偏移量。

 消息通知小红点

//无count属性，size不生效
<Badge dot> 
          <NotificationOutlined style={{fontSize:20,color:'black'}}/>
        </Badge>