props

标签：验证   child   组件   字符串   color   com   default   reac   外部   

/*
* props 传值
* 是组件自身的属性, 一般用于嵌套的内外层组件中,负责传递信息(传值),通常由父层组件向子组件传递
* 注意:props 对象中的属性与组件中的属性一一对应,不要直接去修改props中属性的值
*
* 需求:定义一个组件WebShow,功能:输出网站的名字和网址,网址是一个可以点击的链接
* 分析:定义一个组件WebName负责输出网站名字,
*      定义一个组件WebLind显示网站的网址,并且可以点击
*
* 思路:
* 1.给WebShow设置两个属性 wname, wlink
* 2.WebShow的props对象增加了两个属性值
* 3.WebName从WebShow的props对象中获取wname的值
* 4.WebLink同理
*
* */

//定义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.baidu.com"/>,
        document.getElementById("container")
);

/*
* ...this.props
* props提供的语法糖,可以将父组件中的 全部属性都复制给子组件
*
* 需求:定义一个组件Link, 包含一个<a>标签,不设置任何属性, 全部从父组件复制得到
*
*
* */

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

});

ReactDOM.render(
        <Link href="http://www.baidu.com" name="名字"/>,
        document.getElementById("container")
);

 this.props.children

/*
* this.props.children
* children是一个例外,不是跟组件的属性对应的
* 表示组件的所有子节点
*
* html5中有一种标签:列表<ul>  <ol>  <li>
*
* 定义一个列表组件,列表项中显示的内容,以及列表项的数量,都由外部决定
*
*
*
* */

//列表组件
var ListComponent = React.createClass({
   render:function () {
       return (
               <ul>
                   {
                     //列表项的数量及内容不确定,在创建模板时才能确定
                     //利用this.props.children冲父组件获取序需要展示的列表项内容
                       // 获取到列表项内容后,需要遍历children,逐项进行设置
                       //使用ReactChildren.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">列表第二项</a>
                </ListComponent>

        ),
        document.getElementById("container")

);

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

var ShowTitle = React.createClass({
    propTypes:{
        //验证title
        //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")
)

props

标签：验证   child   组件   字符串   color   com   default   reac   外部   

原文地址：http://www.cnblogs.com/daxueshan/p/7923190.html