react函数子组件向父组件传值

在 react中父组件向子组件传值使用的props

子组件向父组件传值怎么传呢
可以使用useRef

• useRef是一个方法，且useRef返回一个可变的ref对象
• initialValue被赋值给其返回值的.current对象
• 可以保存任何类型的值:dom、对象等任何可辨值
• ref对象与自建一个{current：‘’}对象的区别是：useRef会在每次渲染时返回同一个ref对象，即返回的ref对象在组件的整个生命周期内保持不变。自建对象每次渲染时都建立一个新的。
• ref对象的值发生改变之后，不会触发组件重新渲染。有一个窍门，把它的改边动作放到useState()之前。

父组件

import {  useRef} from "react";
export default function SystemSettings() {
  let settingStatusRef = useRef();
  return(
       <FormSizeDemo cref={settingStatusRef} settings={settings} onSaveSuccess={fetchSettings} />
  )
  }

子组件

• useImperativeHandle(ref,createHandle,[deps])可以自定义暴露给父组件的实例值。如果不使用，父组件的ref(chidlRef)访问不到任何值（childRef.current==null）
• useImperativeHandle应该与forwradRef搭配使用
• React.forwardRef会创建一个React组件，这个组件能够将其接受的ref属性转发到其组件树下的另一个组件中。
• React.forward接受渲染函数作为参数，React将使用prop和ref作为参数来调用此函数。

import {  useImperativeHandle } from "react";
export default function SystemSettings({ settings, onSaveSuccess, cref }) {
useImperativeHandle(cref, () => ({
    isEditShop,
    isEditLanguage,
    isEditCF,
    isEditPress,
    isEditReceipt,
    isEditInvoice
  }));
}