发布于 2015-10-31 12:06:09 | 506 次阅读 | 评论: 0 | 来源: PHPERZ

在使用React.createClass()创建任意组件时,我们可以通过getDefaultProps方法给他定义一些属性。

/*** @jsx React.DOM */
var APP = React.createClass({
    getDefaultProps:function(){
        return {
            txt:'this is a prop'
        }
    },
    render:function(){
        return (
            <div>
              <h1>Hello React</h1>
              <p>{this.props.cat}</p>
              <p>{this.props.txt}</p>
            </div>
        )
    }
});

React.renderComponent(<APP cat={5} />, document.body)

 

从上面的例子中可以看出,当我们需要在render方法使用某些数据时,可以在getDefaultProps() 函数中定义这个属性,然后通过{this.props.txt}来进行获取。

另外一种就是继承父级元素定义的属性。例如这里的cat={5},写法和在普通html标签上添加属性类似。

我们还可以通过propTypes来定义属性的类型。

propTypes:{
    txt:React.PropTypes.string,
    cat:React.PropTypes.number.isRequired
}

 

这样的好处是可以对传入的属性的类型进行检查。例如这里如果我们定义txt的类型为字符串,而在实际使用时 却传入一个对象或者数字,React就会在console输出警告。

Warning: Invalid prop cat of type number supplied to APP, expected string.

最后一个需要注意的是,如果在<APP cat={5} />里和getDefaultProps函数里同时定义了cat属性, 页面最后实际加载的是前者定义的值。

getDefaultProps顾名思义就是定义默认的值,所以在我们另外再次定义时会被覆盖。

var APP = React.createClass({
  getDefaultProps: function() {
    return {
      txt: 'awesome txt from default props',
      cat: 'default prop cat'
    };
  },
  propTypes: {
    txt: React.PropTypes.string,
    cat: React.PropTypes.string.isRequired
  },
  render: function() {
    return (
      <div>
        <h1>cat: {this.props.cat}</h1>
        <h1>txt: {this.props.txt}</h1>
      </div>
    )
  }
});

React.renderComponent(<APP cat={'some string'} />, document.body)

 

所以如果执行以上代码,我们最终会看到的结果是:

cat: some string

txt: awesome txt from default props

另外一个与getDefaultProps类似的方法是getInitialState,都可以用来在render是传入数据。不同的是 props一般用于静态数据,而state则偏向与动态。我会在后面讲解state属性时再进行详细介绍。

最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务