Reactjs 入门基础(二)
如果我们需要向组件传递参数,可以使用 this.props 对象,实例如下:
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="柠檬先生" />,
document.getElementById('example')
);
</script>
</body>
注意,在添加属性时, class 属性需要写成 className ,for 属性需要写成 htmlFor ,这是因为 class 和 for 是 JavaScript 的保留字。
如果我们需要向组件传递参数,可以使用 this.props 对象,实例如下:
<body>
<div id="example"></div>
<script type="text/babel">
var WebSite = React.createClass({
render: function() {
return (
<div>
<Name name={this.props.name} />
<Link site={this.props.site} />
</div>
);
}
});
var Name = React.createClass({
render: function() {
return (
<h1>{this.props.name}</h1>
);
}
});
var Link = React.createClass({
render: function() {
return (
<a href={this.props.site}>
{this.props.site}
</a>
);
}
});
React.render(
<WebSite name="柠檬先生" site=" http://www.baidu.com" />,
document.getElementById('example')
);
</script>
</body>
React State(状态)
React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。
React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。
以下实例中创建了 LikeButton 组件,getInitialState 方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state 属性读取。
当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。
<body>
<div id="example"></div>
<script type="text/babel">
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? '喜欢' : '不喜欢';
return (
<p onClick={this.handleClick}>
你<b>{text}</b>我。点我切换状态。
</p>
);
}
});
React.render(
<LikeButton />,
document.getElementById('example')
);
</script>
</body>
React Props
使用 Props
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="柠檬先生" />,
document.getElementById('example')
);
</script>
</body>
默认 Props
你可以通过 getDefaultProps() 方法为 props 设置默认值,实例如下:
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
getDefaultProps: function() {
return {
name: '柠檬先生'
};
},
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
</script>
</body>
Reactjs 入门基础(二)的更多相关文章
- ReactJS入门学习二
ReactJS入门学习二 阅读目录 React的背景和基本原理 理解React.render() 什么是JSX? 为什么要使用JSX? JSX的语法 如何在JSX中如何使用事件 如何在JSX中如何使用 ...
- mybatis入门基础(二)----原始dao的开发和mapper代理开发
承接上一篇 mybatis入门基础(一) 看过上一篇的朋友,肯定可以看出,里面的MybatisService中存在大量的重复代码,看起来不是很清楚,但第一次那样写,是为了解mybatis的执行步骤,先 ...
- ReactJS入门基础
渲染这俩字可能在很多地方都见过.但可能不太理解是啥意思. 那么首先我们来理解一下渲染. 渲染 我觉得这样理解比较通俗. 我们做一个汽车,开始是没有喷漆的(没有css) 只是些框框架架(HTML标签). ...
- ReactJS入门(二)—— 组件的生命周期
如果你熟悉avalon,使用过 data-include-rendered 和 data-include-loaded 等回调方法,那么你会很好地理解React组件的各个生命周期. 说白了其实就是Re ...
- C#入门基础二
万物皆对象:对象是包含数据和操作的实体. 属性:名词 / 对象 \ 方法:动词 ============================================== ...
- Objective-C 快速入门--基础(二)
1.什么是继承?OC中的继承有哪些特点? “继承”是面向对象软件技术当中的一个概念.如果一个类A继承自另一个类B,就把这个A称为"B的子类",而把B称为"A的父类&quo ...
- Linux入门基础二
1.查看用户 who参数 说明 -a 打印能打印的全部 -d 打印死掉的进程 -m 同am i,mom likes -q 打印当前登录用户数及用户 ...
- Reactjs 入门基础(三)
State 和 Props以下实例演示了如何在应用中组合使用 state 和 props .我们可以在父组件中设置 state, 并通过在子组件上使用 props 将其传递到子组件上.在 render ...
- Reactjs 入门基础(一)
实例中我们引入了三个库: react.min.js .react-dom.min.js 和 browser.min.js: 1,react.min.js -React 的 核心库 2,react-do ...
随机推荐
- 使用Template控制Editor显示方式
@Html.EditorFor可以由Template决定显示 虽然都是EditorFor,页面上显示却不同,ReleaseDate是一个Jquery DatePicker: 怎么实现的呢?就是Temp ...
- 20145113 实验二 Java面向对象程序设计
20145113 实验二 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计模式 1.初 ...
- Quartz在Spring中动态设置cronExpression (spring设置动态定时任务)
什么是动态定时任务:是由客户制定生成的,服务端只知道该去执行什么任务,但任务的定时是不确定的(是由客户制定). 这样总不能修改配置文件每定制个定时任务就增加一个trigger吧,即便允许客户 ...
- iOS常用设计模式和机制之Block简单使用
Block :block 实际上就是 Objective-C语言对闭包的实现 闭包(Closure):闭包就是一个函数,或者一个指向函数的指针,加上这个函数执行的非局部变量.闭包允许一个函数访问声明该 ...
- C 内存管理初步了解
1 首先变量了解几个概念 静态变量:用 static 修饰的变量 局部变量: 存储在栈区:作用域是函数块内:生存期是直到函数块结束 全局变量:存储在静态区:作用域是从定义到本源程序结束,生存期是运行期 ...
- AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动;
js做日期选择: 实现当前年份的前5后5年的日期选择 实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变 扩展功能:天数可以根据闰年平年变化 <body> & ...
- python知识点记录(一):
1.如何使print输出不换行: 在print语句末尾加上一个英文逗号. 2.安装第三方模块时,用pip和easy_install是一样的.下载一个setuptools.exe安装好就有easy_in ...
- poj3160 强连通+记忆化搜索
题意:有一张 n 点 m 边的有向无环图,每个点有各自的权值,可正可负,现在从一个点开始走,一直走到不能走到其他点为止,每经过一个点,可以选择获得或不获得它的权值,每个点可以走多次,但是权值只能获得一 ...
- CentOS 6.8 新安装系统的网络IP配置(转载)
实例环境 虚拟机:VMware 11.1.0 系统:CentOS 6.6 # ifconfig -a << 查看所有网卡的状态 2. # vi /etc/sysconfig/n ...
- JSTL中的scope属性
前两天接到老大一个任务:要验证一下<c:import>能否动态地引入不同的文件.当时很兴奋,要知道在对日外包里面,这个也得算技术活了.呵呵! 说干就干,写了两个jsp文件:m.jsp t ...