看以下示例了解如何定义一个组件
// 定义一个组件LikeButton
var LikeButton = React.createClass({
// 给state定义初始值
getInitialState: function() {
return {liked: true};
},
// click事件的处理函数
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? '稀罕' : '讨厌';
return (
<p onClick={this.handleClick}>
我{text}你.
</p>
);
}
}); ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);
或者用ES6定义一个组件
// 使用React.Component来定义组件
class Button extends React.Component {
static displayName = 'Button' static propTypes = {
children: React.PropTypes.any,
className: React.PropTypes.string,
disabled: React.PropTypes.bool,
onClick: React.PropTypes.func,
once: React.PropTypes.bool,
status: React.PropTypes.string,
style: React.PropTypes.object,
type: React.PropTypes.oneOf(['submit', 'button'])
} componentWillReceiveProps(nextProps) {
if (nextProps.disabled !== this.props.disabled) {
this.setState({ disabled: nextProps.disabled })
}
} state = {
disabled: this.props.disabled,
show: null
} disable(elem) {
this.setState({ disabled: true, show: elem })
} enable(elem) {
this.setState({ disabled: false, show: elem })
} handleClick() {
if (this.props.onClick) {
this.props.onClick()
}
if (this.props.once) {
this.disable()
}
} render() {
let status = this.props.status
if (status) {
status = `rct-button-${status}`
} const className = classnames(
this.props.className,
this.getGrid(),
'rct-button',
status
) return (
<button onClick={this.handleClick.bind(this)}
style={this.props.style}
disabled={this.state.disabled}
className={className}
type={this.props.type || "button"}>
{ this.state.show || this.props.children }
</button>
)
}
} export default Button
参考地址:http://www.zhufengpeixun.cn/article/144
react 编写组件 五的更多相关文章
-
React编写组件的局部样式
我们都知道,在Vue的单文件组件中,style标签中编写的样式默认为全局样式,如果我们想编写局部样式, 使用一个scoped关键字就可以. 那么在React中怎么实现呢? (注: 这种方法必须使用类选 ...
-
beeshell —— 开源的 React Native 组件库
介绍 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...
-
移动web端的react.js组件化方案
背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...
-
为Node.js编写组件的几种方式
本文主要备忘为Node.js编写组件的三种实现:纯js实现.v8 API实现(同步&异步).借助swig框架实现. 关键字:Node.js.C++.v8.swig.异步.回调. 简介 首先介绍 ...
-
react创建组件的几种方式及其区别
react创建组件有如下几种方式 ①.函数式定义的无状态组件 ②.es5原生方式React.createClass定义的组件 ③.es6形式的extends React.Component定义的组 ...
-
React创建组件的三种方式及其区别
内容转载于http://www.cnblogs.com/wonyun/p/5930333.html React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归; 具体的三种方式: ...
-
用 React 编写移动应用 React Native
转载:用 React 编写移动应用 React Native ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App.而且React ...
-
React之组件
鉴于个人的开发习惯,我将react默认的文件结构作了如下修改: 我们的项目是写在src目录下的. 那么,接下来,继续看react的组件式如何编写的吧. 一.react的组件 不同于vue的每个组件都是 ...
-
初学React:组件的样式
React中组件的样式有三种: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
随机推荐
-
CODEVS1533 互斥的数(哈希表)
给定一个集合,要求一个最大子集,满足两两之间不互斥.对两个数x,y互斥的定义是,y=p*x. 先对集合中的数从小到大排序后线性扫,若一个数x可以取则取,取完之后p*x这个数不可取.由于数字较大,使用哈 ...
-
ArcGIS Engine DEM拉伸渲染
从符号库中取出渲染使用的色带对象IColorRamp(也可以自己定义色带内容) <pre name="code" class="csharp">IS ...
-
如何重启MySQL服务,正确重启mysql
RedHat Linux (Fedora Core/Cent OS) 1.启动:/etc/init.d/mysqld start 2.停止:/etc/init.d/mysqld stop 3.重启:/ ...
-
Android性能优化---布局优化
我们从事Android开发编写布局的时候大多数是使用XML来布局,这给我们带来了方便性,这样操作可以布局界面的代码和逻辑控制的Java代码分离出来,使程序的结构更加清晰.明了.特别的复杂的布局,但是这 ...
-
S关于使用QL声明 找出同时满足多个tag拍摄条件设置算法
表结构 Tag Table:{tag_id, tag_name} #标签表 News Table:{news_id, title,......} #新闻列表 NewsTags Table:{tag ...
-
Struts2--ModelDriven接收参数
1. JSP文件调用格式: <a href="user/user!add?name=a&age=8">添加用户</a> 2. struts.xml文 ...
-
java课设
1.代码截图: 2.设计思路 建立GUI界面,系统产生一个随机数(对用户不可见),然后用户输入猜测数,系统根据用户每次输入的数据给出评语(偏大,偏小,猜测成功).当用户最终猜测成功后,就把当次的随机数 ...
-
face_recognition 模块安装
https://blog.csdn.net/qq_15192373/article/details/78623741 https://blog.csdn.net/roguesir/article/de ...
-
深度估计&;平面检测小结
https://yq.aliyun.com/ziliao/582885 最近一段时间已知忙着赶图像分析与理解的项目,在三个星期内强行接触了CNN,MRF,Caffe,openCV在内的很多东西.现在项 ...
-
SpringMVC由浅入深day02_5数据回显_6异常处理器
5 数据回显 5.1 什么数据回显 表单提交失败需要再回到表单页面重新填写,原来提交的数据需要重新在页面上显示. 5.2 pojo数据回显方法 1.springmvc默认对pojo数据进行回显. po ...