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

最新推荐文章于 2024-04-23 09:59:13 发布

酷jjs

最新推荐文章于 2024-04-23 09:59:13 发布

阅读量788

点赞数

分类专栏：前端笔记 react

本文链接：https://blog.csdn.net/qq_32584661/article/details/71272212

版权

前端笔记同时被 2 个专栏收录

165 篇文章 2 订阅

订阅专栏

react

19 篇文章 0 订阅

订阅专栏

需求：定义一个复合组件，设置组件自身属性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>