一、props介绍
- 组件自身的属性对象、一般用于嵌套内外层组件中、负责传递传递数据、通常是由父层组件向子层组件传递。
- props对象中的属性与组件中的属性一一对应、不要直接修改props中的属性的值。
二、案例
/*
定义一个WebShow组件,输出网址的名字和地址,网址是一个可以点击的链接
分析:定义一个组件WebName负责网址名字的输出,定义组件WebLink输出网址地址,并且可以打开链接
思路:
1.给WebShow设置两个属性,wName、wLink
2.WebShow的props增加了两个属性值
3.WebName从WebShow的props对象中获取wName的值,即网址的名称。
*/
- 定义WebName组件,显示网站名称
var WebName = React.createClass({
render : function(){
return <h1>{this.props.webname}</h1>
}
});
注意:this.props.webname是接收父组件的传值。
- 定义WebLink组件,显示网站网址
var WebLink = React.createClass({
render : function(){
return <a href={this.props.weblink}>{this.props.weblink}</a>
}
});
注意:this.props.weblink是接收父组件的传值。
- 定义WebShow组合组件
var WebShow = React.createClass({
render : function(){
return (
<div>
<WebName webname = {this.props.wname}/>
<WebLink weblink = {this.props.wlink}/>
</div>
)
}
});
注意:this.props.wname和this.props.wlink接收上级的传值,并且在这里将接收的值也传递给了子组件。
- 渲染界面
ReactDOM.render(
<WebShow wname = "百度科技" wlink = "http://www.baidu.com"/>,
document.getElementById("container")
);
注意:wname和wlink分别给WebShow组件传值。
三、案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- react.js是react的核心库 -->
<script src="./build/react.js" charset="utf-8"></script>
<!-- react-dom.js的作用是提供与DOM相关的功能 -->
<script src="./build/react-dom.js" charset="utf-8"></script>
<!-- browser.min.js的作用是将JSX语法转换成JavaScrept语法 -->
<script src="./build/browser.min.js" charset="utf-8"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->
</head>
<body>
<!-- React渲染的模板内容会插入到这个DOM节点中,作为一个容器 -->
<div id="container">
</div>
</body>
<!-- 在React开发中,使用JSX语言,与JavaScrpt不兼容,在JSX的地方,要设置一下type为text/babel -->
<!-- babel是一个转换编辑器,把ES6转换成可以在浏览器运行的代码 -->
<script type="text/babel">
// 在此处编写React代码
/*
props、state
props :组件自身的属性对象、一般用于嵌套内外层组件中、负责传递传递数据、通常是由父层组件向子层组件传递
注意:props对象中的属性与组件中的属性一一对应、不要直接修改props中的属性的值
*/
/*
定义一个WebShow组件,输出网址的名字和地址,网址是一个可以点击的链接
分析:定义一个组件WebName负责网址名字的输出,定义组件WebLink输出网址地址,并且可以打开链接
思路:
1.给WebShow设置两个属性,wName、wLink
2.WebShow的props增加了两个属性值
3.WebName从WebShow的props对象中获取wName的值,即网址的名称。
*/
//定义WebName
var WebName = React.createClass({
render : function(){
return <h1>{this.props.webname}</h1>
}
});
//定义WebLink
var WebLink = React.createClass({
render : function(){
return <a href={this.props.weblink}>{this.props.weblink}</a>
}
});
//定义WebShow
var WebShow = React.createClass({
render : function(){
return (
<div>
<WebName webname = {this.props.wname}/>
<WebLink weblink = {this.props.wlink}/>
</div>
)
}
});
//渲染
ReactDOM.render(
<WebShow wname = "百度科技" wlink = "http://www.baidu.com"/>,
document.getElementById("container")
);
</script>
</html>
四、案例展示