通常的引用antd中的组件咱们须要
import {Button} from 'antd'
class App extends React.Component{html
render(){ return( <div> <Button/> </div> ) }
}
如上代码所示,须要把import的组件放在咱们的render中去渲染,
import {message,Button} from 'antd'
class App extends React.Component{antd
handleClick=()=>{ message.success('注册成功!', 2) } render(){ return( <div> <Button onClick={this.handleClick}/> </div> ) }
}
像message这种组件,咱们就能够看成一个方法调用,而后出现相应提示界面,其原理是利用React.createElement()方法,传入相应的html标签和元素类型内容,而后也是插入到Root根节点message对应实例方法以下
getMessageInstance(function (instance) {this
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 }); });
});spa