javascript-目标DOM如何在地图中反应useRef

我正在寻找有关使用react useRef()挂钩获取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>
}

我该如何实现？

解决方法:

useRef只是部分类似于React的ref(仅具有当前字段的对象的结构).

useRef挂钩旨在在渲染之间存储一些数据,并且更改数据不会触发重新渲染(与useState不同).

还要提醒您：最好避免在循环或if中初始化钩子.是first rule of hooks.

考虑到这一点,我们：

>创建数组,并通过useRef将其保留在渲染之间
>我们通过createRef()初始化每个数组的元素
>我们可以使用.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挂钩中访问它.原因：ref是在元素渲染后绑定的,因此在渲染运行期间首次运行时尚未初始化.

标签：javascript,reactjs,react-hooks
来源： https://codeday.me/bug/20191010/1888441.html