react入门 createclass使用说明
在使用react.createclass之前，我们先来看官方给出的解释
reactclass createclass(object specification)
创建一个给出说明的组件类（这个给出的说明也就是其参数 object specification）。这个组件实现一个render方法，并且render方法返回一个单一的节点。这个返回的节点可能包含任意深度的子节点结构。该方法与标准的原型类不同的地方就是不用使用new去实例化对象。这些组件被很好的封装起来，可以很好的为你创建后台实例。
当然，单看这些定义我是不知道该如何去使用createclass方法的（我觉的我翻译的不够标准）。那下面我们直接通过一个实例来解释如何使用react.createclass()。
在本篇文章，我们只是实现render方法，并且在介绍应该注意的问题。对于object specification的详细介绍，那就涉及到了组件的详细说明和生命周期的知识，在本篇我们不做介绍。
例一
var root = react.createclass({
render:function(){
return (
);
},
});
reactdom.render(
document.getelementbyid('content')
);
这是一个简单的例子。虽说简单，但是有两个需要注意的地方。
第一点就是生命的root首字母必须大写，也就是说我们如果将root 写成root，那么
var root = react.createclass({
render:function(){
return (
);
},
});
reactdom.render(
document.getelementbyid('content')
);
其解析的结果如下
显然这不是我们想要的结果。
第二点是，在一个createclass创建的组件中只能有一个根节点。这个根节点可以有任意层的子节点。下面我们看如下的代码
var root = react.createclass({
render:function(){
return (
);
},
});
reactdom.render(
document.getelementbyid('content')
);
这段代码也是存在错误的，在解析过程中会报如下的错误
syntaxerror: embedded: adjacent jsx elements must be wrapped in an enclosing tag (22:18) 20 | return ( 21 |
> 22 | | ^ 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 (
);
},
});
reactdom.render(
document.getelementbyid('content')
);
这样就能保证一个组件中只有一个根节点，又能实现我们想要的效果。
其实对于render来说，该方法会返回一个react组件树，用来接受该组件树的变量名称必须首字母大写。并且该组件树只能有一个根节点，这也是符合实际情况的。最终这棵组件树会被reactdom.render渲染成html标签。
对于例二中的
其实react.createclass的知识点很多，这里我只是简单介绍在使用过程中应该注意的问题。
希望对大家有所帮助。
转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处
本文地址：
相关文章
jquery 中的 window.onload 与 $(document).ready
发布时间：2024/03/24 浏览次数：180 分类：javascript
-
本教程演示了如何在 jquery 中使用 window.onload 和 $(document).ready 事件。
node.js 与 react js 的比较
发布时间：2023/03/27 浏览次数：173 分类：node.js
-
本文比较和对比了两种编程语言，node.js 和 react。react 和 node.js 都是开源 javascript 库的示例。 这些库用于构建用户界面和服务器端应用程序。
在 typescript 中 react usestate 钩子类型
发布时间：2023/03/19 浏览次数：246 分类：
-
本教程演示了如何在 typescript 中使用 react usestate hook。
在 react 中循环遍历对象数组
发布时间：2023/03/18 浏览次数：602 分类：react
-
在 react 中循环对象数组： 使用 map() 方法迭代数组。 我们传递给 map() 的函数会为数组中的每个元素调用。 该方法返回一个新数组，其中包含传入函数的结果。 export default function app (
获取 react 中元素的类名
发布时间：2023/03/18 浏览次数：340 分类：react
-
在 react 中使用 event.target 获取元素的类名 获取元素的类名： 将元素上的 onclick 属性设置为事件处理函数。 访问元素的类名作为 event.currenttarget.classname 。 export default function app () { cons
如何将 key 属性添加到 react 片段
发布时间：2023/03/18 浏览次数：206 分类：react
-
使用更详细的片段语法将 key 属性添加到 react 片段，例如 react.fragment key={key} 。 更冗长的语法实现了相同的结果对元素列表进行分组，而不向 dom 添加额外的节点。 import react from react
如何在 react 中删除事件监听器
发布时间：2023/03/15 浏览次数：592 分类：react
-
在 react 中删除事件监听器： 在 useeffect 挂钩中添加事件侦听器。 从 useeffect 挂钩返回一个函数。 当组件卸载时，使用 removeeventlistener 方法移除事件监听器。 import {useref, useeffect} from r
发布时间：2023/03/15 浏览次数：261 分类：react
-
react 中在 map() 中使用条件： 在数组上调用 map() 方法。 使用 if 条件，如果条件满足则显式返回。 否则返回不同的值或返回 null 以不呈现任何内容。 export default function app () { const arr =
