props

一、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>

一、props介绍

二、案例

三、案例代码

四、案例展示

猜你喜欢