[react 基础篇]——React.createClass(）方法同时创建多个组件类

react 组件

React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类

 

一个组件创建

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

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

 

两个组件创建

var HelloMessage1 = React.createClass({
        render: function() {
          return <h1>Hello {this.props.name}</h1>;
        }
      });

      var HelloMessage2 = React.createClass({
        render: function() {
          return <h1>Hello {this.props.name}</h1>;
        }
      });

      ReactDOM.render(
        <div>
            <HelloMessage1 name="fannie" />
            <HelloMessage2 name="Girl" />
        </div>,
        document.getElementById('example')
      );

同时创建多个组件，在ReactDOM.render（）只能有一个顶层标签，不然会报错的

 

React.createClass(）方法总结

1. 所有组件类都必须有自己的 render 方法，用于输出组件。
2. 组件类的第一个字母必须大写，否则会报错
3. 组件类只能包含一个顶层标签，否则也会报错。
4. 组件的属性可以在组件类的 this.props 对象上获取
5. 添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。

后话

　　react 组件创建方式有三种，下一篇具体说说哪三种？有何区别？怎么选择适合自己的？