- 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可以限制的类型
- PropTypes.array
- PropTypes.bool
- PropTypes.func
- PropTypes.number
- PropTypes.object
- PropTypes.string
- PropTypes.sbol
State和props的区别:
React中的数据流是单项的,只会从父组件传递到子组件。
- 属性props是父子组件间进行状态传递的接口,React会向下遍历整个数组树,并重新渲染使用这个属性的组件。
- props可以理解为父组件与子组件之间的状态传递,而React的组件都有自己的状态,这个内部状态使用state表示,state只能在组件内部使用,state只应该用于存储简单的视图状。
- state可以通过setState()修改,而props是只读的。 state主要用在组件的内部,维护组件更新。props用来父组件向子组件传值,是只读的。