javascript - 如何在 map 中使用 react useRef 定位 DOM

Question

我正在寻找一个关于使用 React useRef() 钩子(Hook)获取 DOM 元素数组的解决方案。

例子:

const Component = () => 
{

  // In `items`, I would like to get an array of DOM element
  let items = useRef(null);

  return <ul>
    {['left', 'right'].map((el, i) =>
      <li key={i} ref={items} children={el} />
    )}
  </ul>
}

我怎样才能做到这一点？

Answer 1

useRef 只是部分类似于 React 的 ref(只是对象的结构，只有 current 字段)。

useRef Hook 旨在在渲染之间存储一些数据，并且更改该数据不会触发重新渲染(与 useState 不同)。

还有一点温馨提示:最好避免在循环或if 中初始化钩子(Hook)。这是first rule of hooks .

考虑到这一点，我们:

1. 通过 useRef 创建数组并将其保存在渲染之间

2. 我们通过 createRef()

   初始化每个数组的元素

3. 我们可以使用.current 表示法来引用列表

   const Component = () => {
   
     let refs = useRef([React.createRef(), React.createRef()]);
   
     useEffect(() => {
       refs.current[0].current.focus()
     }, []);
   
     return (<ul>
       {['left', 'right'].map((el, i) =>
         <li key={i}><input ref={refs.current[i]} value={el} /></li>
       )}
     </ul>)
   }
   

这样我们就可以安全地修改数组(比如改变它的长度)。但不要忘记 useRef 存储的变异数据不会触发重新渲染。因此，要改变长度以重新渲染，我们需要涉及 useState。

const Component = () => {

  const [length, setLength] = useState(2);
  const refs = useRef([React.createRef(), React.createRef()]);

  function updateLength({ target: { value }}) {
    setLength(value);
    refs.current = refs.current.splice(0, value);
    for(let i = 0; i< value; i++) {
      refs.current[i] = refs.current[i] || React.createRef();
    }
    refs.current = refs.current.map((item) => item || React.createRef());
  }

  useEffect(() => {
   refs.current[refs.current.length - 1].current.focus()
  }, [length]);

  return (<>
    <ul>
    {refs.current.map((el, i) =>
      <li key={i}><input ref={refs.current[i]} value={i} /></li>
    )}
  </ul>
  <input value={refs.current.length} type="number" onChange={updateLength} />
  </>)
}

也不要在第一次渲染时尝试访问 refs.current[0].current - 它会引发错误。

说

      return (<ul>
        {['left', 'right'].map((el, i) =>
          <li key={i}>
            <input ref={refs.current[i]} value={el} />
            {refs.current[i].current.value}</li> // cannot read property `value` of undefined
        )}
      </ul>)

所以你要么保护它

      return (<ul>
        {['left', 'right'].map((el, i) =>
          <li key={i}>
            <input ref={refs.current[i]} value={el} />
            {refs.current[i].current && refs.current[i].current.value}</li> // cannot read property `value` of undefined
        )}
      </ul>)

或者在 useEffect 钩子(Hook)中访问它。原因:ref 是在元素渲染后绑定(bind)的，所以在渲染第一次运行时它还没有初始化。