Antd message 这种组件为何不须要在Render中使用,只须要在方法中调用

通常的引用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

相关文章
相关标签/搜索