javascript - 子组件一般不仅仅有1个元素，这里的子组件代码内有多个input元素，是否是在fowardRef传输时候需要传输多个ref进行使用？还是说这里一个ref就足够使用了呢？

Question

父组件可以通过子组件的forwardRef，进行控制子组件内的一个元素：如以下代码

import React, { forwardRef, LegacyRef, useRef } from 'react';
import logo from './logo.svg';
import './App.css';

//#region 子组件定义
const ChildComp = forwardRef(( props, ref: LegacyRef<HTMLInputElement> ) => {

  return <>
<input value="我是子组件的input1" ref={ref} />
<input value="我是子组件的input2" />
<input value="我是子组件的input3" />
</>
})
//#endregion

function App() {

  const inpRef = useRef(null)

  const focusFn = () => {
    console.log(inpRef.current)
  }

  return (
    <div className="App">
      <ChildComp ref={inpRef} />

      <button onClick={focusFn}>点击打印当前inpuRef</button>
    </div>
  );
}

export default App;

但是我们知道子组件一般不仅仅有1个元素，这里的代码内有多个input元素，是否是在传输时候需要传输多个ref进行使用？还是说这里一个ref就足够使用了呢？比如要操作input2的value。

Answer 1

先说结论：ref 只需要一个。

开发要遵循迪米特原则，尽量保持功能的高内聚低耦合。

1. 对于 App 组件来说，ChildComp 对他来说是黑盒的，不应该感知 ChildComp 用没用 input 或者用了几个 input。
2. 对于 ChildComp 来说，也不希望外部感知到自己内部的实现，应该面向功能对外暴露方法。

ref 就是连接 App 和 ChildComp 的一个通道。

Answer 2

可以将 ref 传递成一个对象

父组件：

const F = () => {
  const oneRef = useRef()
  const twoRef = useRef()
  return <S ref={{ oneRef, twoRef}} />
}

子组件：

const S = forwardRef((props, ref) => {
  return (
<>
    <button ref={ref.oneRef}>submit</button>
    <button ref={ref.twoRef}>submit</button>
</>
)
})

一个ref的话，可以使用 https://zh-hans.react.dev/reference/react/useImperativeHandle