react组件 -- React.createClass()方法

1、React.createClass()方法用于生成一个组件类

2、所有组件类都必须有自己的render方法，用于输出组件

3、假如生成一个组件类HelloMessage，模板插入<HelloMessage />时，会自动生成组件类HelloMessage的一个实例

4、组件类的第一个字母必须大写，否则会报错，比如HelloWorld，不能写成helloWorld

5、组件类里面只能包含一个顶层标签，否则会报错（组件类的render方法里面）

6、组件类对应的标签的用法和HTML标签的用法完全一致，可以加入任意的属性。假如生成一个组件类HelloMessage，其对应的组件标签就是<HelloMessage />，在这个标签里面可以加入普通的HTML标签的任意属性，例如：<HelloMessage name="小丸子"/>，就是给组件标签<HelloMessage />加入了一个name属性，值为“小丸子”

7、给组件标签添加属性时，需要注意两个地方，就是把class属性写成className，for属性写成htmlFor，这是因为class和for时JS里面的保留字

下面举一个例子：

<!DOCTYPE html>

<html>

<head>

<script src="../build/react.js"></script>

<script src="../build/react-dom.js"></script>

<script src="../build/browser.min.js"></script>

</head>

<body>

<div id="example"></div>

<script type="text/babel">//babel将JSX转化成JS

var HelloMessage = React.createClass({

render: function() {

return <h1>Hello {this.props.name}</h1>;

}

});

//本人理解：React.render()中由两个元素组成，第一个元素是组件类形成的虚拟标签，经渲染后（即是return的返回值）显示在第二个元素所取容器中。

ReactDOM.render(<HelloMessage name="John" />,document.getElementById('example'));

</script>

</body>

</html>

网页显示结果为：Hello John

在本篇文章，我们只是实现render方法，并且在介绍应该注意的问题。对于object specification的详细介绍，那就涉及到了组件的详细说明和生命周期的知识，在本篇我们不做介绍。

例一

var Root = React.createClass({
   render:function(){
        return (
          <h1>迹忆博客</h1>
        );
    },
});
ReactDOM.render(
        <Root />,
        document.getElementById('content')
);

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

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

var root = React.createClass({
    render:function(){
        return (
          <h1>迹忆博客</h1>
        );
    },
});
ReactDOM.render(
        <root />,
        document.getElementById('content')
);

其解析的结果如下

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

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

var Root = React.createClass({
    render:function(){
        return ( <h1>迹忆博客</h1>
          <a>www.onmpw.com</a>
);
},
});
ReactDOM.render(
<Root />,
document.getElementById('content')
);

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

SyntaxError: embedded: Adjacent JSX elements must be wrapped in an enclosing tag (22:18) 20 | return ( 21 | <h1>迹忆博客</h1> > 22 | <a>www.onmpw.com</a> | ^ 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 (
<div>
            <h1>迹忆博客</h1>
            <a>www.onmpw.com</a>
          </div>
);
},
});
ReactDOM.render(
<Root />,
document.getElementById('content')
);

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

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

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

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

希望对大家有所帮助。

React.createClass()方法相关推荐

转载 React.createClass 对决 extends React.Component
先给出结论,这其实是殊途同归的两种方式.过去我们一般都会使用 React.createClass 方法来创建组件,但基于 ES6 的小小语法糖,我们还可以通过 extends React.Compon ...
React组件方法中为什么要绑定this
React组件方法中为什么要绑定this 如果你尝试使用过React进行前端开发,一定见过下面这样的代码: //假想定义一个ToggleButton开关组件class ToggleButton ext ...
[react] React.createClass和extends Component的区别有哪些？
[react] React.createClass和extends Component的区别有哪些? 1.语法 React.createClass和extends采用函数构造 extends Comp ...
React.createClass和extends Component的区别
语法区别 propType 和 getDefaultProps 状态的区别 this区别 Mixins 语法区别 React.createClass import React from 'react' ...
react销毁方法钩子0_React钩子：使用React状态的新方法
react销毁方法钩子0 Updated: With React 16.8, React Hooks are available in a stable release! 更新:随着React 16. ...
[react] shouldComponentUpdate方法是做什么的
[react] shouldComponentUpdate方法是做什么的 shouldComponentUpdate是React组件的生命周期,在组件更新后触发,该方法继承子React.Compone ...
[react] render方法的原理你有了解吗？它返回的数据类型是什么？
[react] render方法的原理你有了解吗?它返回的数据类型是什么? render的第一个参数通过babel转为React.createElement,后者根据参数类型的不同调用不同的内部方法来 ...
04.React事件方法、 React定义方法的几种方式获取数据改变数据执行方法传值...
2019独角兽企业重金招聘Python工程师标准>>> 一.基本用法在以类继承的方式定义的组件中,为了能方便地调用当前组件的其他成员方法或属性(如:this.state),通常需要 ...
react全局方法_前端面试题 ---react
高阶组件相关什么是高阶组件,它有哪些运用? 高阶组件就是一个函数,接收一个组件,经过处理后返回后的新的组件: 高阶组件,不是真正意义上的组件,其实是一种模式: 可以对逻辑代码进行抽离,或者添加某个共 ...

React.createClass()方法

react组件 -- React.createClass()方法

React.createClass()方法相关推荐

最新文章

热门文章