React.createClass()

中文翻译 https://discountry.github.io/react/3.4K ( https://doc.react-china.org868 )

React支持组件的运用React.createClass 方法就用于生成一个组件类

下面这是一个用Reac.createClass写的一个DOM页面


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script type="text/javascript" src="build/browser.min.js">

</script>
</head>
<div id="esample">

</div>
<body>
<script type="text/babel">
var Hello=React.createClass({//定义组件的方法,首字母必须大写
render:function(){
return <h1> Hello {this.props.name}//必须只有一个标签
</h1>;

}
});

ReactDOM.render(//值传参数
<Hello name="React"/>,
document.getElementById("esample")

);

</script>
</body>
</html>

 

我们修改几个地方看看React打死不能动的地方

我们从代码里面可以看出,当我们把VAR 后面的首字母H改成小写h可以看出控制台就会报错,我们由此知道声明后边的首字母必须大写;

上述的代码用React.createClass()封装了一组代码,组件名字为Hello

在调<Hello name="React">组件的属性可以在组件类的 this.props对象上获取

class的用法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title> <script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script type="text/javascript" src="build/browser.min.js"> </script>
<style type="text/css">
.red{
color: red;
}
</style>
</head>
<div id="esample"> </div>
<body>
<script type="text/babel">
var Hello=React.createClass({//定义组件的方法,首字母必须大写
render:function(){
return <h1 className="red"> Hello {this.props.name}</h1>;
// className首字母要小写
}
}); ReactDOM.render(//值传参数
<Hello name="React"/>,
document.getElementById("esample") ); </script>
</body>
</html>

效果

React.createClass

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title> <script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script type="text/javascript" src="build/browser.min.js"> </script> </head>
<div id="esample"> </div>
<body>
<script type="text/babel">
var Title=React.createClass({
propTypes:{
title:React.PropTypes.string.isRequired,
},
render:function(){
return <h1>你好 {this.props.title}</h1>
//此处定义的是字符串类型所以后面必须写出字符串类型
}
});
ReactDOM.render(
<Title title='123' />,
//如这写123不加引号的话,控制台会报错
document.getElementById('esample')
) </script> </body>
</html>

  

上面的Mytitle组件有一个title属性。PropTypes 告诉 React,这个 title 属性是必须的,而且它的值必须是字符串。现在,我们设置 title 属性的值是一个数值。

如果我们把字符串的值换了我们看看浏览器报的错

此外,getDefaultProps 方法可以用来设置组件属性的默认值。我们把titel:里面的string类型改成number类型也可以显示

React的组件用法的更多相关文章

  1. 【react表格组件】material-table 基本用法 & 组件override

    教程: https://mbrn.github.io/material-table/#/ https://material-ui.com/api/table/ github: https://gith ...

  2. 移动web端的react.js组件化方案

     背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...

  3. React 学习(一) ---- React Element /组件/JSX

    学习React的时候,你可能听到最多的就是要先学习webpack, babel,要先学会配置然后才能学react 等等,一堆的配置就把我们吓着了,根本就没有心情就学习react了.其实在最开始学习re ...

  4. 你不可不知的 React Native 混合用法(Android 篇)

    前言 当前 React Native 虽说版本更新比较快,各种组件也提供的很全面了,但是在某些情况下,混合开发的方式才会快速缩短开发周期,原因无非就是原生平台的"底蕴"无疑更深,拥 ...

  5. React context基本用法

    React的context就是一个全局变量,可以从根组件跨级别在React的组件中传递.React context的API有两个版本,React16.x之前的是老版本的context,之后的是新版本的 ...

  6. React入门介绍(2)- React Component-React组件

    React Component-React组件 允许用户自由封装组件是React非常突出的特性,用户可将自己创建的组件像普通的HTML标签一样插入页面,React.CreateClass方法就是用来创 ...

  7. React的组件

    React的组件化思想尤为明显,一切皆组件,觉着比Vue的组件化思想更加凸显. const PacketBG = (props) =>( <div className="pack ...

  8. react第二单元(react的组件-state-props-setState)

    第二单元(react的组件-state-props-setState) 课程目标 理解组件和组件的创建.以及能够根据实际场景去划分合理的组件. 理解并且能够灵活的应用组件中的state.props. ...

  9. Griddle, griddle-react 一个REACT 表格组件

    Griddle, griddle-react 一个REACT 表格组件: http://griddlegriddle.github.io/Griddle/index.html

随机推荐

  1. multisim页面设置

    options—sheet properties 页面右键—properties

  2. MySQL的JOIN(一):用法

    JOIN的含义就如英文单词"join"一样,连接两张表,大致分为内连接,外连接,右连接,左连接,自然连接.这里描述先甩出一张用烂了的图,然后插入测试数据. CREATE TABLE ...

  3. c# typeof 与 GetType 作用与区别

    官方解释: Used to obtain the "System.Type" object for a type. A 'typeof' expression takes the ...

  4. [转]RMI方式Ehcache集群的源码分析

    RMI方式Ehcache集群的源码分析   Ehcache不仅支持基本的内存缓存,还支持多种方式将本地内存中的缓存同步到其他使用Ehcache的服务器中,形成集群.如下图所示:   Ehcache支持 ...

  5. poj 2455 二分+最大流

    这个因为点少用邻接矩阵做的. 题意:求由1到n的t条不重复路径中最大边权值的最小值. 思路:先对边权进行排序,然后二分边权值,建图求从1到n的最大流,当最大流为t时便求出答案. 代码: #includ ...

  6. 解决Android Studio中Refreshing gradle project时间过长的最简单方法

    Refreshing gradle project往往出现在Gradle出现更新,需要从墙外的网重新拖下来的前提下.具体可以查看以下文件:/path/to/project/gradle/wrapper ...

  7. none,hidden和opacity="0"设置元素不可见的区别

    none,hidden和opacity="0"均可设置元素为不可见的状态.其中none属于display的属性值,hidden属于visibility的属性值.使用none时元素不 ...

  8. 集美大学网络1413第九次作业成绩(团队五) -- 测试与发布(Alpha版本)

    NO.NE团队的项目链接有效,六个核桃和六指神功团队可以请教下他们,避免因IP地址无效或者因tomcat不打开就不能访问的情况,毕竟助教没办法知道此时此刻它是开着还是关闭啊啊啊... 题目 团队作业5 ...

  9. Java-反射机制学习

    反射机制是Java的一个重要性,它使得Java语言具有了动态特性.比如说,可以在代码中动态地获取某个类的信息,生成它的实例.获取其成员变量.调用它的方法.下面通过几个示例来演示反射机制的作用与用法. ...

  10. 201521123085 《Java程序设计》第7周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 参考资料: 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 代码: ...