props详解

ReactNative系列-文章

props详解

props

props是react组件的属性，一经指定，在被指定的组件的生命周期中则不再改变。在react组件中，所有的参数都放在this.props属性里面，例如有如下的一个组件：

import React from 'react';

class Title extends React.Component {
  render() {
    return (
      <div className="Title">
        <Text>this.props.name</Text>
      </div>
    );
  }
}

export default Title;

我们在其它组件内部引入上述Title组件：

class Content extends React.Component {
  render() {
    return (
      <Title name="登陆" />
      ...
    );
  }
}

在Title组件中，就可以通过this.props.name拿到传入的值（登陆）。通过这种方式，React 组件可以接受外部消息。

this.props.children

this.props里有一个比较特殊的参数this.props.children，它用来表示当前组件所包含的所有内容。例如我想在其它引用Content组件的标签里，添加标签，如下的样子：

class App extends React.Component {
  render() {
    return (
      <Content name="登陆" >
        <div>
          ...
        </div>
      </Content>
    );
  }
}

直接添加肯定会报错，那么如何支持呢？使用this.props.children，它意味着组件内部可以拿到 用户在组件里面放置的内容。可以将Content组件改为这样：

class Content extends React.Component {
  render() {
    return (
      <div>
        <Title name="登陆" />
        {this.props.children}
      </div>
    );
  }
}

这样，在Content里就可以接收到用户在组件里面放置的内容了。

static propTypes

在定制组件的时候通常会给它传递一些属性，例如:

<FlatList
  data={[{key: 'a'}, {key: 'b'}]}
  renderItem={({item}) => <Text>{item.key}</Text>}
/>

propTypes允许我们规定属性的类型和是否必须传递。isRequeired说明该值不能为空，必须传递。我们对上述的Title组件进行属性定义：

import React from 'react';
import PropTypes from 'prop-types';

class Title extends React.Component {
  static propTypes = {
    name: PropTypes.string.isRequeired
  }
  render() {
    return (
      <div className="Title">
        <p>this.props.name</p>
      </div>
    );
  }
}

export default Title;

其中name: PropTypes.string.isRequeired就表示该name属性类型为string，而且必须传递。

PropTypes可选的类型有：any/array/bool/func/number/object/string/node/element/symbol。

但是，如果我不想对name属性必须传递，我希望我不设置它的时候，它自己有默认值，这时候defaultProps就发挥了作用。

static defaultProps

给对象设置默认属性，如果组件中没有拿到传过来的属性值，则把这里默认的值赋给该属性。

我们对Title组件继续改写：

import React from 'react';
import PropTypes from 'prop-types';

class Title extends React.Component {
  static propTypes = {
    name: PropTypes.string
  }
  static defaultProps = {
    name: '标题'
  }
  render() {
    return (
      <div className="Title">
        <p>this.props.name</p>
      </div>
    );
  }
}

export default Title;

这样，当我在Content组件中使用这个Title组件，就不需要一定设置name的属性值了。

class Content extends React.Component {
  render() {
    return (
      <div>
        <Title></Title>
        {this.props.children}
      </div>
    );
  }
}