React学习笔记3

props 向组件里面传递值

props是组件自身的属性,一般用于嵌套的内外侧组件,负责传递信息

定义组件WebName

var WebName = React.createClass({
     render:function(){
         return <h1>{this.props.webname}</h1>
      }
});

渲染组件WebName

ReactDOM.render(
     <WebName webname="我该想个中文昵称了"/>,
      document.querySelector("container")
);

使用...this.props

这是props的一个功能,可以将父组件的全部属性都赋值给子组件

先定义一个组件

var Link = React.createClass({
      render:function(){
         return <a {...this.props}>{this.props.name}</a>
      }
});

然后渲染

ReactDOM.render(
     <Link href="https://eorig.cc" name="in0a"/>,
     document.querySelector("#container")
);

渲染结果:

<a data-reactroot="" href="https://eorig.cc" name="in0a">in0a</a>

使用this.props.childer

childer表示组件所有的子节点,他能获取父组件的所有子节点,获取到值后还需将它遍历才能使用

使用React.Children.map来遍历,他会返回一个数组对象

定义组件

let ListComponent = React.createClass({
     render:function(){
        return(
            <ul>
               {
                   React.Children.map(this.props.children,function(child){
                   return <li>{child}</li>
                       }
                   )
               }
           </ul>
    )}
 });

渲染并传入子节点

ReactDOM.render(
     (
         <ListComponent>
            <h1>in0a</h1>
            <a href="https://eorig.cc">eorig.cc</a>
         </ListComponent>
     ),
document.querySelector("#container")
);

结果:

<ul data-reactroot="">
   <li>
    <h1>in0a</h1>
  </li>
  <li>
    <a href="https://eorig.cc">eorig.cc</a>
  </li>
</ul>

propTypes属性验证

验证传入的属性是否符合要求

let ShowTitle = React.createClass({
     prpoTypes:{
         //title数据验证,必须为字符串
         title:React.PropTypes.string.isRequired
     },
     render:function () {
         return <h1>{this.props.title}</h1>
     }
 });

getDefaultProps设置属性的默认值

let MyTitle = React.createClass({
    getDefaultProps:function () {
         return {
            title:"in0a"
         };
    },
    render:function () {
        return <h1>{this.props.title}</h1>
    }
 });
分享 二维码
分类:代码笔记
还没有评论


在此输入评论..
0/100