如果我们需要向组件传递参数，可以使用 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 入门基础(二)的更多相关文章

  1. ReactJS入门学习二

    ReactJS入门学习二 阅读目录 React的背景和基本原理 理解React.render() 什么是JSX? 为什么要使用JSX? JSX的语法 如何在JSX中如何使用事件 如何在JSX中如何使用 ...

  2. mybatis入门基础(二)----原始dao的开发和mapper代理开发

    承接上一篇 mybatis入门基础(一) 看过上一篇的朋友,肯定可以看出,里面的MybatisService中存在大量的重复代码,看起来不是很清楚,但第一次那样写,是为了解mybatis的执行步骤,先 ...

  3. ReactJS入门基础

    渲染这俩字可能在很多地方都见过.但可能不太理解是啥意思. 那么首先我们来理解一下渲染. 渲染 我觉得这样理解比较通俗. 我们做一个汽车,开始是没有喷漆的(没有css) 只是些框框架架(HTML标签). ...

  4. ReactJS入门（二）—— 组件的生命周期

    如果你熟悉avalon,使用过 data-include-rendered 和 data-include-loaded 等回调方法,那么你会很好地理解React组件的各个生命周期. 说白了其实就是Re ...

  5. C#入门基础二

    万物皆对象:对象是包含数据和操作的实体. 属性:名词     /  对象     \      方法:动词 ============================================== ...

  6. Objective-C 快速入门--基础(二)

    1.什么是继承?OC中的继承有哪些特点? “继承”是面向对象软件技术当中的一个概念.如果一个类A继承自另一个类B,就把这个A称为"B的子类",而把B称为"A的父类&quo ...

  7. Linux入门基础二

    1.查看用户 who参数          说明 -a      打印能打印的全部 -d      打印死掉的进程 -m    同am i,mom likes -q      打印当前登录用户数及用户 ...

  8. Reactjs 入门基础(三)

    State 和 Props以下实例演示了如何在应用中组合使用 state 和 props .我们可以在父组件中设置 state, 并通过在子组件上使用 props 将其传递到子组件上.在 render ...

  9. Reactjs 入门基础(一)

    实例中我们引入了三个库: react.min.js .react-dom.min.js 和 browser.min.js: 1,react.min.js -React 的 核心库 2,react-do ...

随机推荐

  1. iOS-硬件声音 ，振动，提示警告

    为了引起用户注意发出警告的时候,常常伴随有提示音震动等.系统声音服务提供了一个接口,用于播放不超过30秒的声音文件,他支持的格式有CAF,AIF,WAV. iOS使用该API支持3种不同的通知: 声音 ...

  2. RBL开发笔记二

     17:13:55 2014-08-25 有以下几个点:  第一 :怎么在预处理阶段能够做到识别某个宏是否给定义了  这里就定义了一个SystemConfig.h 专门做这个事情  当然是需要make ...

  3. url 传参写法

    qianee-web/invite/123 @RequestMapping("/invite/{userId}") public ModelAndView invite(HttpS ...

  4. VS 2010 编译 Openssl

    VS 2010 编译 Openssl 1. 编译环境: Visual Studio 2010 Windows 7 64 旗舰版 openssl-1.0.1s 2. 下载安装ActivePerl,下载下 ...

  5. canvas实现类似弹窗广告效果

    先看看下面的效果图,想想使用canvas是怎样实现的? 如下图: 这个就不详细描述了,看代码就会了. <!doctype html> <html lang="en" ...

  6. JavaScript中“typeof”运算符与“instanceof”运算符的差异

    在JavaScript中,运算符“typeof”和“instanceof”都可以用来判断数据的类型,那么这两个运算符有什么不同之处呢? 差异一:使用方式不同. 最明显的差异就是这两个运算符的使用方式了 ...

  7. 【我所理解的Cocos2d-x】第六章 精灵Sprite 读书笔记

    简介: 精灵是2D游戏里最重要的元素.游戏场景中大部分可见的元素都直接或间接地与精灵相关. 在Cococs2d-xz中,精灵使用Sprite表示,它将一张纹理的一部分或者全部的矩形区域绘制在屏幕上. ...

  8. 关于URL编码

    关于URL编码 作者: 阮一峰 日期: 2010年2月11日 一.问题的由来 URL就是网址,只要上网,就一定会用到. 一般来说,URL只能使用英文字母.阿拉伯数字和某些标点符号,不能使用其他文字和符 ...

  9. ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室（十四）之漏掉的客服消息

    前言 不知不觉已经十四篇了,其实已经没有什么可写了.但是突然发现layim中带的客服功能没有用到.于是乎,抽点时间完成吧.其实之前的工作已经把客服功能完成了一大半,剩下的我们稍微调整即可.今天的演示我 ...

  10. knockout 学习实例4 css

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...