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

来源：互联网发布：电脑扩音器软件话筒编辑：程序博客网时间：2024/04/30 12:42
蓝鸥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>
0 1