React的组件用法
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的组件用法的更多相关文章
- 【react表格组件】material-table 基本用法 & 组件override
教程: https://mbrn.github.io/material-table/#/ https://material-ui.com/api/table/ github: https://gith ...
- 移动web端的react.js组件化方案
背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...
- React 学习(一) ---- React Element /组件/JSX
学习React的时候,你可能听到最多的就是要先学习webpack, babel,要先学会配置然后才能学react 等等,一堆的配置就把我们吓着了,根本就没有心情就学习react了.其实在最开始学习re ...
- 你不可不知的 React Native 混合用法(Android 篇)
前言 当前 React Native 虽说版本更新比较快,各种组件也提供的很全面了,但是在某些情况下,混合开发的方式才会快速缩短开发周期,原因无非就是原生平台的"底蕴"无疑更深,拥 ...
- React context基本用法
React的context就是一个全局变量,可以从根组件跨级别在React的组件中传递.React context的API有两个版本,React16.x之前的是老版本的context,之后的是新版本的 ...
- React入门介绍(2)- React Component-React组件
React Component-React组件 允许用户自由封装组件是React非常突出的特性,用户可将自己创建的组件像普通的HTML标签一样插入页面,React.CreateClass方法就是用来创 ...
- React的组件
React的组件化思想尤为明显,一切皆组件,觉着比Vue的组件化思想更加凸显. const PacketBG = (props) =>( <div className="pack ...
- react第二单元(react的组件-state-props-setState)
第二单元(react的组件-state-props-setState) 课程目标 理解组件和组件的创建.以及能够根据实际场景去划分合理的组件. 理解并且能够灵活的应用组件中的state.props. ...
- Griddle, griddle-react 一个REACT 表格组件
Griddle, griddle-react 一个REACT 表格组件: http://griddlegriddle.github.io/Griddle/index.html
随机推荐
- multisim页面设置
options—sheet properties 页面右键—properties
- MySQL的JOIN(一):用法
JOIN的含义就如英文单词"join"一样,连接两张表,大致分为内连接,外连接,右连接,左连接,自然连接.这里描述先甩出一张用烂了的图,然后插入测试数据. CREATE TABLE ...
- c# typeof 与 GetType 作用与区别
官方解释: Used to obtain the "System.Type" object for a type. A 'typeof' expression takes the ...
- [转]RMI方式Ehcache集群的源码分析
RMI方式Ehcache集群的源码分析 Ehcache不仅支持基本的内存缓存,还支持多种方式将本地内存中的缓存同步到其他使用Ehcache的服务器中,形成集群.如下图所示: Ehcache支持 ...
- poj 2455 二分+最大流
这个因为点少用邻接矩阵做的. 题意:求由1到n的t条不重复路径中最大边权值的最小值. 思路:先对边权进行排序,然后二分边权值,建图求从1到n的最大流,当最大流为t时便求出答案. 代码: #includ ...
- 解决Android Studio中Refreshing gradle project时间过长的最简单方法
Refreshing gradle project往往出现在Gradle出现更新,需要从墙外的网重新拖下来的前提下.具体可以查看以下文件:/path/to/project/gradle/wrapper ...
- none,hidden和opacity="0"设置元素不可见的区别
none,hidden和opacity="0"均可设置元素为不可见的状态.其中none属于display的属性值,hidden属于visibility的属性值.使用none时元素不 ...
- 集美大学网络1413第九次作业成绩(团队五) -- 测试与发布(Alpha版本)
NO.NE团队的项目链接有效,六个核桃和六指神功团队可以请教下他们,避免因IP地址无效或者因tomcat不打开就不能访问的情况,毕竟助教没办法知道此时此刻它是开着还是关闭啊啊啊... 题目 团队作业5 ...
- Java-反射机制学习
反射机制是Java的一个重要性,它使得Java语言具有了动态特性.比如说,可以在代码中动态地获取某个类的信息,生成它的实例.获取其成员变量.调用它的方法.下面通过几个示例来演示反射机制的作用与用法. ...
- 201521123085 《Java程序设计》第7周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 参考资料: 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 代码: ...