资讯专栏INFORMATION COLUMN

Antd message 这种组件为什么不需要在Render中使用,只需要在方法中调用

pingan8787 / 1959人阅读

摘要:一般的引用中的组件我们需要如上代码所示,需要把的组件放在我们的中去渲染,,注册成功像这种组件,我们就可以当作一个方法调用,然后出现相应提示界面,其原理是利用方法,传入相应的标签和元素类型内容,然后也是插入到根节点对应实例方法如下

一般的引用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
  });
});

});

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/105747.html

相关文章

  • React项目国际化(antd)多语言开发

    摘要:本国际化方案仅针对技术栈,且不会涉及服务端国际化内容。引入多语言环境的数据虽然我只用到了文本翻译的功能,以为就不需要加载这些数据,但后来发现这是必须的步骤。 前言 最近新接了一个项目,从0开始做,需要做多语言的国际化,今天搞了一下,基本达到了想要的效果, 在这里简单分享下: showImg(https://segmentfault.com/img/bVbuiJB); 背景国际化方案国际...

    tracymac7 评论0 收藏0
  • React项目国际化(antd)多语言开发

    摘要:本国际化方案仅针对技术栈,且不会涉及服务端国际化内容。引入多语言环境的数据虽然我只用到了文本翻译的功能,以为就不需要加载这些数据,但后来发现这是必须的步骤。 前言 最近新接了一个项目,从0开始做,需要做多语言的国际化,今天搞了一下,基本达到了想要的效果, 在这里简单分享下: showImg(https://segmentfault.com/img/bVbuiJB); 背景国际化方案国际...

    wushuiyong 评论0 收藏0
  • React+webpack+Antd从0到1开发一个todoMvc

    摘要:在装载组件之前调用会组件的构造函数。当实现子类的构造函数时,应该在任何其他语句之前调用设置初始状态绑定键盘回车事件,添加新任务修改状态值,每次修改以后,自动调用方法,再次渲染组件。可以通过直接安装到项目中,使用或进行引用。 首先我们看一下我们完成后的最终形态:TodoMvc: showImg(https://segmentfault.com/img/remote/14600000085...

    sanyang 评论0 收藏0
  • JSON生成Form表单

    摘要:是校验表单组件数据正确性的字段,其值为数组,里面的数组元素可以为。所以数组元素如果为的话,其内容就是的。到目前为止,表单适合大部分的表单应用场景。 JSON表单 描述 JSON表单是一个基于React的抽象组件,它可以把JSON数据格式描述的表单转换成项目中的表单,它可以用简短的几行代码,快速的生成Form表单。JSON表单的优点是: 可以快速构建出一个表单 表单的数据、逻辑、视图分...

    bingchen 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<