react demo6 (设置组件自身属性this.props)

来源：互联网发布：windows services.msc 编辑：程序博客网时间：2024/05/27 09:44

需求：定义一个复合组件，设置组件自身属性this.props
学习：组件自身属性this.props

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>react dome</title>    <script src="./build/react.js"></script>    <script src="./build/react-dom.js"></script>    <script src="./build/browser.min.js"></script></head><body><div id="container"></div><script type="text/babel">   /*    props、state    props是组件自身的属性，一般用于嵌套的内外层组件中，负责传递信息（通常是由父层组件向子层组件传递）    注意：props对象中的属性和组件的属性一一对应，不要直接去修改props中的属性的值    需求：定义一个复合组件WebShow，功能：输出网站的名字和网址，网址是一个可以点击的链接    分析：定义一个组件WebName负责输出网站名字，定义组件WebLink显示网站的网址，并且可以点击    思路：    1.给WebShow设置两个属性，wname 、wlink    2.WebShow的props对象增加了两个属性值    3.WebName从WebShow的pros对象中获取wname的值，即网站名称    4.WebLink从WebShow的pros对象中获取wlink的值，即网站地址   */   //定义组件：webName   var WebName = React.createClass({       render:function () {           return <h1>{this.props.wname}</h1>       }   });   //定义组件：webLink   var WebLink = React.createClass({       render:function(){           return <a href={this.props.wlink}>{this.props.wlink}</a>       }   });   //定义复合组件：webShow   var WebShow = React.createClass({       render:function(){           return (                   <div>                       <WebName wname={this.props.wname}/>                       <WebLink wlink={this.props.wlink}/>                   </div>           )       }   });   //渲染   ReactDOM.render(       <WebShow wname="百度一下" wlink="http://www.baidu.com"/>,       document.getElementById("container")   )</script></body></html>

0 0