React中如何将refs传递给自定义组件并调用其内部方法

1. 先修正方法名不匹配问题 #

你当前父组件调用的是this.a.current.setValue()，但自定义组件CusComponent内部定义的公开方法名为value，二者命名不匹配会导致调用失败，任选其一修改对齐即可：

• 方案1：父组件调用修改为 this.a.current.value(a, data => { ... })
• 方案2：将CusComponent内部的value方法重命名为setValue

2. 分组件类型处理Ref传递 #

情况1：CusComponent为类组件 #

直接按你写的方式传递ref即可，类组件的ref会直接指向组件实例，可直接调用挂载在实例上的公开方法：

<CusComponent ref={this.a} />

调用示例（假设你选择对齐方法名为value）：

setValue = (data = {}) => {
  // 先修正你原有代码的解构判断逻辑，更严谨的写法
  const validData = Object.prototype.toString.call(data) === '[object Object]' ? data : {};
  const {a='', b='', c=''} = validData;
  // 调用组件内部方法
  this.a.current.value(a, b, c);
}

情况2：CusComponent为函数组件 #

函数组件默认没有实例，必须搭配React.forwardRef和useImperativeHandle暴露指定方法给父组件：

import React, { forwardRef, useImperativeHandle, useState } from 'react';

const CusComponent = forwardRef((props, ref) => {
  const [a, setA] = useState('');
  const [b, setB] = useState('');
  const [c, setC] = useState('');
  // 这里假设value_a、value_b、value_c也是你定义的ref
  const value_a = React.useRef(null);
  const value_b = React.useRef(null);
  const value_c = React.useRef(null);

  // 暴露方法给父组件的ref
  useImperativeHandle(ref, () => ({
    value: (a, b, c) => {
      if (a) {
        setA(a, () => {
          value_a.current?.value(a);
          if (b) {
            setB(b, () => {
              value_b.current?.value(b);
              if (c) {
                setC(c, () => {
                  value_c.current?.value(c);
                })
              }
            })
          }
        })
      }
    }
  }));

  return <div>你的组件内容</div>
})
export default CusComponent;

3. 修正原有代码语法错误 #

你提供的两段代码都存在括号不闭合、语法不规范的问题，修改时请先补全闭合所有括号、箭头函数的边界，避免语法报错导致逻辑不生效。

内容的提问来源于stack exchange，提问作者Trần Tiến