antdmessage使用_Antd message 这种组件为什么不需要在Render中使用，只需要在方法中调用...

一般的引用antd中的组件我们需要

import {Button} from 'antd'

class App extends React.Component{

render(){

return(

)

}

}

如上代码所示，需要把import的组件放在我们的render中去渲染，

import {message，Button} from 'antd'

class App extends React.Component{

handleClick=()=>{

message.success('注册成功！', 2)

}

render(){

return(

)

}

}

像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

});

});

});