小编pop*_*ing的帖子

useRef for element in loop in react

使用 React,我有一个以这种方式静态声明的 ref 列表:

  let line1 = useRef(null);
  let line2 = useRef(null);
  let line3 = useRef(null);
  ...
  //IN MY RENDER PART
  <li ref={(el) => (line1 = el)}>line1</li>
  <li ref={(el) => (line2 = el)}>line1</li>
  <li ref={(el) => (line3 = el)}>line1</li>
Run Code Online (Sandbox Code Playgroud)

然后将 refs 传递给动画函数,一切正常;现在事情发生了一些变化,我使用地图创建了列表项,但我不再能够正确引用该元素;我试过这样的事情:

{menu.menu.map((D) => {
let newRef = createRef();
                    LiRefs.push(newRef);
                    return (
                      <li
                        key={D.id}
                        ref={(el) => (newRef = el)} >
                        {D.label}
                      </li>
                    );
                  })}
Run Code Online (Sandbox Code Playgroud)

但是我传递给动画函数的数组是空的(我猜是因为该函数是在 useEffect 钩子内部调用的,而 LiRefs 还不是 useRef)我也知道

  • 我将创建,所以我可以在开始时声明它们,并使用类似的引用

    ref={(el) => (`line${i}` = el)}
    
    Run Code Online (Sandbox Code Playgroud)

    这对我可以尝试的任何其他解决方案不起作用?

  • reactjs use-ref

    2
    推荐指数
    3
    解决办法
    2509
    查看次数

    标签 统计

    reactjs ×1

    use-ref ×1