React -- 属性 props

85 阅读1分钟
(1)基本使用

props 用于组件之间的传值 ,是组件之间进行通信的一种方式。

父组件

1854.png

子组件

1855.png

(2) 在子组件中对传过来的 props 进行限制

有些属性是需要一些限制的,因为有一些属性,从父组件传过来后,需要在子组件中进行展示或者使用。此时,就需要对传过来的 props 进行限制,防止乱穿!!!

限制是在子组件中定义的:

通过子组件的 propTypes 属性(类属性,是一个对象):在里面设置要限制的属性类型

1856.png

  • 库是 'prop-types'

补充: 类属性与对象属性

  • 类属性是,可以直接通过定义的类名访问的
  • 对象属性是,必须要通过 new 出来的实例访问的
  • 直接定义在类里面的属性是 对象属性
  • 属性前面加上static 的是 类属性
  • 通过类名.xxx 设置的是 类属性

1857.png

(3) 默认属性

需要给属性设置默认值,如果要传的就是默认值,就可以省略不传,要不每个都要手动传!!!

设置方法: 通过子组件的 defaultProps 属性(类属性[前面要加 static],是一个对象) ,在里面对属性设置默认值!!

1858.png

(4) 可以进行批量传递

let obj = { name : '翔哥', age : 18, }

<Navbar ...obj />

(5)属性的修改

注意:

  • 属性是不能子组件内部直接进行修改的,会报错
  • 可以在父组件中修改,这样子组件也可以拿到最新的数据
  • 也可以让父组件传给子组件一个函数,然后在子组件中调用该函数实现属性的修改!!!