Antd message 這種組件爲何不須要在Render中使用，只須要在方法中調用

通常的引用antd中的組件咱們須要
import {Button} from 'antd'
class App extends React.Component{

render(){
    return(
        <div>
            <Button/>
        </div>
    )
}

}
如上代碼所示，須要把import的組件放在咱們的render中去渲染，
import {message，Button} from 'antd'
class App extends React.Component{

handleClick=()=>{
     message.success('註冊成功！', 2)
}
render(){
    return(
        <div>
            <Button onClick={this.handleClick}/>
        </div>
    )
}

}
像message這種組件，咱們就能夠看成一個方法調用，而後出現相應提示界面，其原理是利用React.createElement()方法，傳入相應的html標籤和元素類型內容，而後也是插入到Root根節點message對應實例方法以下
getMessageInstance(function (instance) {

var iconNode = React.createElement(_icon["default"], {
    type: iconType,
    theme: iconType === 'loading' ? 'outlined' : 'filled'
  });
  instance.notice({
    key: target,
    duration: duration,
    style: {},
    content: React.createElement("div", {
      className: "".concat(prefixCls, "-custom-content").concat(args.type ? " ".concat(prefixCls, "-").concat(args.type) : '')
    }, args.icon ? args.icon : iconType ? iconNode : '', React.createElement("span", null, args.content)),
    onClose: callback
  });
});

});