react里做一个修改效果_React系列之--props属性

版权声明：本文为博主原创文章，未经博主允许不得转载。

1、React之props属性

我们想要在组件之间进行传值，那么props属性就起到了这个作用,在React中props和state是两个非常非常非常重要的属性一定要掌握这两个。(以下都是使用ES5的写法，没有特殊说明的都是使用ES5写法)

Note:属性是用于设置默念值，不改变的值使用props,而改变的值我们要使用state，我们后面章节再说

2、React之props属性基本用法

1、基本用法

在Component组件中使用this.props.data就可以取得data中的值(其中data这个字段可以任意指定但是组件中的和获取props要对应就好了)

2、废话不多说，直接上例子

在这一节中我们使用browserify来管理js代码，如果不知道browserify可以查看此节

这里假设你把browserify环境都搭建起来了

PS：本文最后的Demo是使用webpack+yarn来完成，这也是主流的方式，但是你掌握了browserify也算是多掌握一门技术。

(1)、我们新建props文件夹，并且搭建browserify环境

(2)、新建index.html

props用法

(3)、新建component文件夹(在这里我们体验一下组件化的思想)，在component文件夹中新建一个Props.js(这就是一个组件)

//引入所需要的类

var React = require('react');

var Propos = React.createClass({

render: function() {

return (

{this.props.data}

);

}

});

//将此类暴漏出去 供个部使用

module.exports = Propos;

(4)在props目录下新建index.js文件，并且使用require引入Props组件

// index.js

var React = require('react');

var ReactDOM = require('react-dom');

var Props = require('./component/Props.js') ;

ReactDOM.render(

,

document.getElementById('example')

);

5、我们使用browserify来将index.js转化成bundle.js

browserify -t [ babelify ] index.js -o bundle.js

当然我们也可以使用watchify

6、最后我们在浏览器中查看结果

props_single.png

<