年年有"余"

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1508|回复: 0

[React] 第三讲 React组件props的基本使用

[复制链接]
  • TA的每日心情
    奋斗
    2022-12-13 21:26
  • 签到天数: 371 天

    [LV.9]以坛为家II

    发表于 2017-12-22 17:44:39 | 显示全部楼层 |阅读模式
    1、上一讲中实现了组合组件的基本使用,但组件中的值是固定的,没有通过外部传值来决定内容的显示;
    2、组件的调用时也没有给定属性值,如果需要传值形式如下
    [JavaScript] 纯文本查看 复制代码
    // 未传值
         ReactDOM.render(
           <WebShow  />,
           document.getElementById("container")
         );
    // 传值
         ReactDOM.render(
           <WebShow wname="Sian" wlink="http://www.yusian.com" />,
           document.getElementById("container")
         );
    3、调用时传值进来的属性在定义时接收并使用,通过this.props.xxxx获取
    [JavaScript] 纯文本查看 复制代码
         var WebShow = React.createClass({
           render:function(){
             return(
               <div>
               <WebName webname={this.props.wname} />
               <WebLink weblink={this.props.wlink} />
               </div>
             );
           }
         });

    4、如果是组合组件,值还可以再次往下级子组件中传递
    [JavaScript] 纯文本查看 复制代码
         var WebName = React.createClass({
           render:function(){
             return <h1>{this.props.webname}</h1>;
           }
         });
    
         var WebLink = React.createClass({
           render:function(){
             return <a href={this.props.weblink}>{this.props.weblink}</a>;
           }
         });

    5、效果链接:http://www.yusian.com/react/props/index.html
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    手机版|小黑屋|Archiver|iOS开发笔记 ( 湘ICP备14010846号 )

    GMT+8, 2024-3-29 04:02 , Processed in 0.043987 second(s), 18 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表