props详解

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u013003052/article/details/87894022


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>
    );
  }
}
展开阅读全文

没有更多推荐了,返回首页