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 组件创建方式有三种,下一篇具体说说哪三种?有何区别?怎么选择适合自己的?

[react 基础篇]——React.createClass()方法同时创建多个组件类的更多相关文章

  1. react 基础篇 #2 create-react-app

    1. 介绍 在开发react应用时,应该没有人用传统的方法引入react的源文件(js),然后在html编辑吧. 大家都是用webpack + es6来结合react开发前端应用. 这个时候,我们可以 ...

  2. React基础篇学习

    到今天为止, 使用react已经一年了, 现在整理一下入门时的一些重要知识, 帮助想要学习react的同学们理解某些内容. React 元素 React 元素,它是 React 中最小基本单位,我们可 ...

  3. react基础篇三

    事件处理 React事件绑定属性的命名采用驼峰式写法,而不是小写. 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法) 例如,传统的 HTML: < ...

  4. react基础篇二

    组件 & Props & 生命周期 组件可以将UI切分成一些独立的.可复用的部件,这样你就只需专注于构建每一个单独的部件. 组件从概念上看就像是函数,它可以接收任意的输入值(称之为“p ...

  5. React基础篇(2) -- state&amp;props&amp;refs

    内容简介 state props refs 行内样式及动态类名 state 基本介绍 React 把组件看成是一个状态机(State Machines).通过与用户的交互,实现不同状态,然后渲染 UI ...

  6. react基础篇五

    再看JSX 本质上来讲,JSX 只是为 React.createElement(component, props, ...children) 方法提供的语法糖.比如下面的代码: <MyButto ...

  7. react基础篇四

    列表 & Keys 渲染多个组件 你可以通过使用{}在JSX内构建一个元素集合 下面,我们使用Javascript中的map()方法遍历numbers数组.对数组中的每个元素返回<li& ...

  8. React基础篇 (1)-- render&amp;components

    render 基础用法 //1.创建虚拟DOM元素对象 var vDom=<h1>hello wold!</h1> //2.渲染 ReactDOM.render(vDom,do ...

  9. react基础篇六

    创建 Refs 使用 React.createRef() 创建 refs,通过 ref 属性来获得 React 元素.当构造组件时,refs 通常被赋值给实例的一个属性,这样你可以在组件中任意一处使用 ...

随机推荐

  1. co.js - 让异步代码同步化

    近期在全力开发个人网站,并且又沉淀了一些前后端的技术.近期会频繁更新. 这篇文章首发于我的个人网站:听说 - https://tasaid.com/,建议在我的个人网站阅读,拥有更好的阅读体验. 这篇 ...

  2. Android开发小问题记录

    安卓资源文件无法命名大写字母,否则导致不会生成R类!!! 资源文件的命名容许的字符为“a-z0-9_.”,即只容许有小写字母,数字0-9,下划线和点 Notification不显示 有些手机会对not ...

  3. Linux下mysql主从配置

    mysql服务器的主从配置,这样可以实现读写分离,也可以在主库挂掉后从备用库中恢复需要两台机器,安装mysql,两台机器要在相通的局域网内主机A: 192.168.1.100从机B:192.168.1 ...

  4. Servlet程序开发--取得初始化配置信息

    代码: 两个初始化init方法,一起出现的话,有参的才起作用 package org.lxh.servletdemo ; import java.io.* ; import javax.servlet ...

  5. Chapter 1 First Sight——7

    Eventually we made it to Charlie's. 最终我们到了查理斯的家. He still lived in the small,two-bedroom house that ...

  6. Elasticsearch1.7服务搭建与入门操作

    ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.Elasticsearch是用Java开发的,并作为Apach ...

  7. static与final区别

    1. final   final类不能被继承,没有子类,final类中的方法默认是final的 final方法不能被子类的方法复盖,但可以被继承 final成员变量表示常量,只能被赋值一次,赋值后不能 ...

  8. SQL Server 2008 R2 链接 Oracle

    参考网站: SP_addlinkedserver 小结 (oracle,sql server,access,excel) 64位SqlServer通过链接服务器与32位oracle通讯 SQL Ser ...

  9. Linux常用命令1-50(持续更新中)

    1:echo $PATH  (打印出PATH变量的值) 不同用户下面的PATH值有可能不一样 echo   有显示打印的意思 $         表示后面的是一个变量的意思 PATH  变量 /usr ...

  10. 【Codeforces】Codeforces Round #492 (Div. 2) (Contest 996)

    题目 传送门:QWQ A:A - Hit the Lottery 分析: 大水题 模拟 代码: #include <bits/stdc++.h> using namespace std; ...