蓝鸥React Native零基础入门到项目实战 props

原创 2016年12月27日 10:34:53

蓝鸥React Native零基础入门到项目实战 Hello React

http://edu.csdn.net/course/detail/3129

props


<!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语法转换成JavaScript语法 -->
    <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,跟JavaScript不兼容,在使用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.lanou3g.com" />,
      document.getElementById("container")
    );
  */

  /*
     ...this.props
     props提供的语法糖,可以将父组件中的全部属性都复制给子组件

     需求:定义一个组件Link,Link组件中只包含一个<a>,我们不给<a>设置任何属性,所有属性全部从父组件复制得到
   */

  // var Link = React.createClass({
  //   render: function() {
  //     return <a {...this.props}>{this.props.name}</a>
  //   }
  // });
  //
  // ReactDOM.render(
  //   <Link href="http://www.lanou3g.com" name="蓝鸥科技" />,
  //   document.getElementById("container")
  // );

  /*
    this.props.children

    children是一个例外,不是跟组件的属性对应的。
    表示组件的所有子节点

    HTML5中有一种标签:列表 <ul> <ol> <li>

    定义一个列表组件,列表项中显示的内容,以及列表项的数量都由外部决定

   */

  // var ListComponent = React.createClass({
  //   render: function() {
  //     return (
  //       <ul>
  //         {
  //           /*
  //               列表项数量以及内容不确定,在创建模板时才能确定
  //               利用this.props.children从父组件获取需要展示的列表项内容
  //
  //               获取到列表项内容后,需要遍历children,逐项进行设置
  //               使用React.Children.map方法
  //               返回值:数组对象。这里数组中的元素是<li>
  //
  //            */
  //           React.Children.map(this.props.children, function(child){
  //             // child是遍历得到的父组件的子节点
  //             return <li>{child}</li>
  //           })
  //
  //         }
  //       </ul>
  //     );
  //   }
  // });
  //
  // ReactDOM.render(
  //   (
  //     <ListComponent>
  //       <h1>蓝鸥科技</h1>
  //       <a href="http://www.lanou3g.com">http://www.lanou3g.com</a>
  //     </ListComponent>
  //   ),
  //   document.getElementById("container")
  // );


  /*
    属性验证 propTypes

    组件类的属性

    用于验证组件实例的属性是否符合要求
   */

    // var ShowTitle = React.createClass({
    //   propTypes: {
    //     // title数据类型必须为字符串
    //     title: React.PropTypes.string.isRequired
    //   },
    //   render: function() {
    //     return <h1>{this.props.title}</h1>
    //   }
    // });
    //
    // ReactDOM.render(
    //   <ShowTitle title=123 />,
    //   document.getElementById("container")
    // );

  /*

    设置组件属性的默认值

    通过实现组件的getDefaultProps方法,对属性设置默认值
   */

  //   var MyTitle = React.createClass({
  //     getDefaultProps: function() {
  //       return {
  //         title: "蓝鸥科技"
  //       };
  //     },
  //     render: function() {
  //       return <h1>{this.props.title}</h1>
  //     }
  //   });
  //
  // ReactDOM.render(
  //   <MyTitle />,
  //   document.getElementById("container")
  // );


  </script>

</html>


版权声明:本文为博主原创文章,未经博主允许不得转载。

蓝鸥React Native零基础入门到项目实战 Hello React

蓝鸥React Native零基础入门到项目实战 Hello React
  • lanouyihuiyun
  • lanouyihuiyun
  • 2016年12月27日 10:27
  • 509

蓝鸥React Native零基础入门到项目实战 组件

蓝鸥React Native零基础入门到项目实战 组件
  • lanouyihuiyun
  • lanouyihuiyun
  • 2016年12月27日 10:32
  • 386

零基础学习HTML5—html+css基础【蓝鸥出品】

零基础学习HTML5—html+css基础【蓝鸥出品】
  • lanoulongjiang
  • lanoulongjiang
  • 2016年09月14日 15:54
  • 902

【学习路线】蓝鸥React Native零基础入门到项目实战

【学习路线】蓝鸥React Native零基础入门到项目实战
  • lanouyihuiyun
  • lanouyihuiyun
  • 2016年12月28日 11:24
  • 619

蓝鸥React Native零基础入门到项目实战 state

蓝鸥React Native零基础入门到项目实战 state
  • lanouyihuiyun
  • lanouyihuiyun
  • 2016年12月29日 09:26
  • 578

蓝鸥Unity开发之C#入门视频课后习题汇总

蓝鸥Unity开发之C#入门视频课后习题汇总
  • sinat_35761779
  • sinat_35761779
  • 2016年10月13日 13:24
  • 359

React Native 学习笔记(四)-- State和Props

Part OneImage组件的自带属性Part Two自定义组件并添加属性上面的贴图中我们总结了组件属性的使用和赋值,在JSX语法中给属性赋值,值一般都是对象。比如上面的source={pic}。下...
  • uana_777
  • uana_777
  • 2016年12月05日 19:44
  • 1691

ReactNative入门之props与state

前一篇博客做了一个helloworld的简单例子。今天,继续RN之旅。学会props与state的使用之后,就可以做组件之间的传值和交互了。这对与RN开发来说十分关键。Props: 在java中创建...
  • ZACH_ZHOU
  • ZACH_ZHOU
  • 2017年01月04日 11:08
  • 1059

React Native 组件的默认属性Props的两种写法

首先是ES5 的写法  是通过 getDefaultProps(){ return {duration:1000} } ES 6 的写法如下: static de...
  • JLhaoran
  • JLhaoran
  • 2017年04月11日 14:32
  • 2568

混合开发的大趋势之一React Native Props (属性)

转载请注明出处:王亟亟的大牛之路还是老规矩,先安利:https://github.com/ddwhan0123/Useful-Open-Source-Android 坚持尽量每天更昨天翻了点RN的第...
  • ddwhan0123
  • ddwhan0123
  • 2016年08月18日 11:16
  • 4993
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:蓝鸥React Native零基础入门到项目实战 props
举报原因:
原因补充:

(最多只允许输入30个字)