React中的props_containerprops-CSDN博客

本文链接：https://blog.csdn.net/a821814989/article/details/53812364
<!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>
  </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.hao123.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.hao123.com" name="蓝鸥科技"/>,
  //   document.getElementById("container");
  // );

  /**
    this.props.children
    children是一个例外，它不像props一样跟组件的属性一一对应，
    表示组件的所有子节点

    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.baidu.com">http://www.baidu.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>