How to add " refs " dynamically with react hooks?

在React中，使用hooks动态管理refs主要依赖于useRef和useEffect两个hooks。通常情况下，useRef被用来创建一个ref，而useEffect可以用来处理组件的挂载和卸载逻辑。当涉及到动态添加refs时，我们可以结合使用这两个hooks来根据组件的更新动态地分配和管理refs。

步骤1：使用useRef创建一个容器

首先，我们需要创建一个ref来作为存储动态refs的容器。这个容器通常是一个对象或者数组。

jsx
const refs = useRef([]);

步骤2：在渲染组件时分配ref

当你渲染一个组件列表时，可以在渲染函数中动态地为每个组件分配一个ref。

jsx
{items.map((item, index) => (
  <div ref={el => refs.current[index] = el} key={item.id}>
    {item.content}
  </div>
))}

这里，我们通过一个箭头函数将每个div的ref存储在refs.current中相应的位置。

步骤3：使用useEffect来管理refs的生命周期

如果你需要在组件挂载或卸载时进行一些操作，可以使用useEffect。例如，你可能需要在所有组件加载完成后进行一些操作。

jsx
useEffect(() => {
  // 所有组件挂载完毕后的操作，比如获取某个元素的尺寸等
  console.log(refs.current); // 打印所有的ref

  return () => {
    // 清理工作，比如解绑事件
    refs.current = [];
  };
}, []); // 空依赖数组表示只在组件挂载和卸载时执行

实例：动态创建输入框并焦点管理

假设你有一个可以动态添加输入框的界面，你想在添加新的输入框时自动聚焦到新输入框上。

jsx
function DynamicInputs() {
  const [inputs, setInputs] = useState([]);
  const inputRefs = useRef([]);

  const addInput = () => {
    setInputs(inputs => [...inputs, `Input ${inputs.length + 1}`]);
  };

  useEffect(() => {
    const lastInputIndex = inputs.length - 1;
    if (lastInputIndex >= 0) {
      inputRefs.current[lastInputIndex].focus();
    }
  }, [inputs]);

  return (
    <div>
      {inputs.map((name, index) => (
        <input
          key={index}
          ref={el => inputRefs.current[index] = el}
          placeholder={name}
        />
      ))}
      <button onClick={addInput}>Add Input</button>
    </div>
  );
}

在这个示例中，每当inputs数组更新时（即添加了新的输入框），useEffect会运行，并聚焦到最新的输入框上。

通过这种方式，我们可以有效地动态管理React组件的refs，使我们的应用更加灵活和强大。