React实例对象的props属性

125 阅读2分钟
  • props:只能是父组件向子组件传值。
  • props相对于组件来说是外来属性,使用props可以从组件外部向内部传值,类似于函数的传参,它经常用于组件之间的传值,一种父级向子级传递数据的方式。
  • props属性在子组件里不能进行修改,是只读属性。但是可以把props里的值放在子组件里,然后改变子组件的状态,来更新传过来的值。
  • 如果在父组件里调用子组件,可以把父组件的状态里的数据,传到子组件里。
  • 注意:在构造函数()里可以直接接收props,然后在构造器里写props,就不需要再写this了,直接写props.name ,因为有时候直接用this.props会访问不到props,所以用这种方法,不过现在已经很少用了。
  • 函数式组件中,只有props,把props作为了形参传进来,但是state和context和refs函数式组件里没有,在函数里直接用props就行,在函数里不能使用this.props。函数里向子组件传值,和类式组件一样,把传的值作为子组件的属性,子组件接收时,在函数的形参里接收props
在父类里调用子组件并传递数据
<Child name={this.state.name} sex={this.state.sex}></Child>
在子组件接收数据,直接this.props.子组件里面调用时的属性
不过通常我们都把该数据放在子组件的状态里
state={
    name:this.props.name,
    sex:this.props.sex,
    }

设置父组件传过来的数据类型

  • 对传入的props进行限制(限制数据类型,默认值,必填)
  • 引入proptypes依赖包,用于对组件标签属性进行显示,命令cnpm i proptypes -D
  • 通过给组件类添加proTypes和defaultProps属性限制数据类型和默认值
import PropTypes from "proptypes"
注意:设置限制时是把该行为作为类自身的属性,进行设置
static proTypes={
    name:PropTypes.string,
    age:PropTypes.number.isRequired(设置必填项)
}
设置默认值
static defaultProps={
    age:18,
    sex:"男"
}

React的Props可以限制的类型

  1. PropTypes.array
  2. PropTypes.bool
  3. PropTypes.func
  4. PropTypes.number
  5. PropTypes.object
  6. PropTypes.string
  7. PropTypes.sbol

State和props的区别:

React中的数据流是单项的,只会从父组件传递到子组件。

  1. 属性props是父子组件间进行状态传递的接口,React会向下遍历整个数组树,并重新渲染使用这个属性的组件。
  2. props可以理解为父组件与子组件之间的状态传递,而React的组件都有自己的状态,这个内部状态使用state表示,state只能在组件内部使用,state只应该用于存储简单的视图状。
  3. state可以通过setState()修改,而props是只读的。 state主要用在组件的内部,维护组件更新。props用来父组件向子组件传值,是只读的。