重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

React的createClass怎么使用

这篇文章主要介绍“React的createClass怎么使用”,在日常操作中,相信很多人在React的createClass怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”React的createClass怎么使用”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

创新互联公司是专业的潼南网站建设公司,潼南接单;提供做网站、成都网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行潼南网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

在使用React.createClass之前,我们先来看官方给出的解释

ReactClass createClass(object specification)

创建一个给出说明的组件类(这个给出的说明也就是其参数 object specification)。这个组件实现一个render方法,并且render方法返回一个单一的节点。这个返回的节点可能包含任意深度的子节点结构。该方法与标准的原型类不同的地方就是不用使用new去实例化对象。这些组件被很好的封装起来,可以很好的为你创建后台实例。

当然,单看这些定义我是不知道该如何去使用createClass方法的(我觉的我翻译的不够标准)。那下面我们直接通过一个实例来解释如何使用React.createClass()。

例一

var Root = React.createClass({
    render:function(){
        return (
         

迹忆博客


        );
    },
});
ReactDOM.render(
        ,
        document.getElementById('content')
);

这是一个简单的例子。虽说简单,但是有两个需要注意的地方。

第一点就是生命的Root首字母必须大写,也就是说我们如果将Root 写成root,那么就会被直接解析成html标签()。下面我们来看如下的代码(下面的代码是错误的)

var root = React.createClass({
    render:function(){
        return (
         

迹忆博客


        );
    },
});
ReactDOM.render(
        ,
        document.getElementById('content')
);

其解析的结果如下

显然这不是我们想要的结果。

第二点是,在一个createClass创建的组件中只能有一个根节点。这个根节点可以有任意层的子节点。下面我们看如下的代码

var Root = React.createClass({
    render:function(){
        return (
         

迹忆博客


          www.onmpw.com
        );
    },
});
ReactDOM.render(
        ,
        document.getElementById('content')
);

这段代码也是存在错误的,在解析过程中会报如下的错误

SyntaxError: embedded: Adjacent JSX elements must be wrapped in an enclosing tag (22:18) 20 | return ( 21 |

迹忆博客

> 22 | www.onmpw.com | ^ 23 | ); 24 | }, 25 | }); ...("+loc.line+":"+loc.column+")";var err=new SyntaxError(message);err.pos=pos;err....

因此如果我们想要实现上述我们想要的结果,可以在h1和a的外面再加一层节点。如下

例二

var Root = React.createClass({
    render:function(){
        return (
         


           

迹忆博客


            www.onmpw.com
         

        );
    },
});
ReactDOM.render(
        ,
        document.getElementById('content')
);

这样就能保证一个组件中只有一个根节点,又能实现我们想要的效果。

其实对于render来说,该方法会返回一个React组件树,用来接受该组件树的变量名称必须首字母大写。并且该组件树只能有一个根节点,这也是符合实际情况的。最终这棵组件树会被ReactDOM.render渲染成HTML标签。

对于例二中的

标签,它并不是一个真正的DOM节点,而是一个虚拟的DOM节点。你可以这样认为,组件树中的这些节点就是一些标记或者数据,只是React知道该如何处理这些标记或者数据。

其实React.createClass的知识点很多,这里我只是简单介绍在使用过程中应该注意的问题。

到此,关于“React的createClass怎么使用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


本文名称:React的createClass怎么使用
文章来源:http://cqcxhl.cn/article/ghcshi.html
在线咨询
服务热线
服务热线:028-86922220
TOP