# Notification通知
![](http://p7.qhimg.com/t010133194a004dd84d.gif)

全局通知组件，基于单例设计模式实现，整个App只有一个实例存在于内存中，JS无法私有化构造器，所以换了种形式实现。

## 基本使用方法
```javascript
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Notification from './components/Notification';

let notification = null;
Notification.newInstance({}, (n) => notification = n);

let a = 123
class App extends Component {
  showNotice = () => {
    notification.notice({
      content: <div>测试kafka消息<span style={{float:'right',cursor: 'pointer'}} onClick={notification.removeNotice.bind(this, a)}>不再提醒</span></div>,
      onClose() {
        console.log('simple close');
      },
      duration: 0,
      key: a
    })
  }
  showNotice2 = () => {
    notification.notice({
      content: <div>这条消息会自动关闭</div>,
      onClose() {
        console.log('simple close');
      },
      closable: true,
      duration: 5,
    })
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <button onClick={this.showNotice}>手动关闭的通知</button>
        <button onClick={this.showNotice2}>自动关闭的通知</button>
      </div>
    );
  }
}

export default App;

```
content字段接收一个ReactNode，可以自定义样式和事件，如果要做手动关闭，就跟示例一这样做。

## 属性说明

基于单例实现，所以这些属性都是notice的，也就是能看到的通知框的。

| 参数       | 说明                       | 类型    | 可选值 | 默认值 |
| ---------- | ------------------------- | ------- | ----- | ----- |
| content    | 通知显示内容，可以自定义样式 | Node    |   —   |   —  |
| onClose    | 点击关闭按钮触发的回调事件   | Function |   —   |   —  |
| closable   | 是否显示关闭按钮            | Boolean | — | — |
| duration   | 通知延迟关闭的时间，如果不想自动关闭，把这个参数设置成 0 就好了          | Number | — | 4.5 |