reactjs父子组件间的传值

父传子数据  props

FatherComponent.jsx

image

image

image

ChildComponent.jsx

image

父传子方法 props

FatherComponent.jsx

image

image

ChildComponent.jsx

image

带参数的方法:

FatherComponent.jsx

image

image

ChildComponent.jsx

image

image

父组件将自身传给子组件 props

FatherComponent.jsx

image

image

image

ChildComponent.jsx

image

父组件获取子组件的数据 refs

FatherComponent.jsx

image

image

image

ChildComponent.jsx

image

父组件获取子组件的方法 refs

FatherComponent.jsx

image

image

ChildComponent.jsx

image

image

带有参数的方法:

FatherComponent.jsx

image

image

image

ChildComponent.jsx

image

组件的defaultProps和propTypes

defaultProps:用来初始化组件的props属性

ChildComponent.jsx

image

当父组件FatherComponent没有给子组件ChildComponent的props属性传递message参数值时,会使用default值 => message:’这里是默认信息’

如果有传,则会覆盖掉default值。

propTypes:对组件props属性中的值进行类型约束  (is propTypes no prototype)

ChildComponent.jsx

先导入react的依赖模块prop-types

image

image

这里对子组件ChildComponent的props属性中的message进行类型约束,message必须是个string,如果不是string则会报错

猜你喜欢

转载自www.cnblogs.com/chujunqiao/p/11795422.html