跳到主要内容

react子父组件互相通信传值

· 阅读需 2 分钟
Slipeda

react子父组件互相通信传值

1 父组件传值与函数给子组件,在子组件可使用父组件的值与函数

  • 主要是通过react三大属性之一props来进行。

2 子组件传值与函数给父组件,在父组件可使用子组件的值与函数

  • 通过react的hooks新特性,useRefuseImperativeHandleforwardRef 来实现。

useRef :

useRef 返回一个可变的 ref 对象,其 .current 属性被初始化为传入的参数(initialValue)。返回的 ref 对象在组件的整个生命周期内持续存在。

useImperativeHandle :

useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。在大多数情况下,应当避免使用 ref 这样的命令式代码。useImperativeHandle 应当与 forwardRef 一起使用。

forwardRef :

React.forwardRef 接受渲染函数作为参数。React 将使用 propsref 作为参数来调用此函数。此函数应返回 React 节点。


3 子组件传值与函数给子组件,在子组件可使用另一个子组件的值与函数

  • 其跟子传父的实现方法差不多,通过react的hooks新特性,将useRef建立的实例再通过props传给另一个子组件就可以啦~。

感谢看完!