代码之家  ›  专栏  ›  技术社区  ›  Bear Bile Farming is Torture

为React Component分配ref、className和style参数

  •  0
  • Bear Bile Farming is Torture  · 技术社区  · 4 年前

    首先 useRef 优先于 className 和 style ?

    例如:

    function Comp() {
      const comp_ref = useRef();
    
      useEffect(() => {
        if (comp_ref.current) {
          comp_ref.current.className = "local-container";
          comp_ref.current.style.color = "white";
        }
      }, [])
    
      return <div ref={comp_ref} className="global-container" style={{color: "black"}} ></div>
    }
    

    在初始渲染期间,返回 div 将有 class “全局容器”和风格 color: black; 。

    但是,在初始渲染之后,返回 div 将永远 班 “本地容器”和风格 color: white; 。

    首先,以上理解正确吗?

    0 回复  |  直到 4 年前
        1
  •  1
  •   Oki    4 年前

    useRef 没有更高的优先级 超过className和style。

    这里没有优先事项。它们是不同的东西。

    在您的示例中,直接更改DOM 渲染后 。这就是它更改className和样式的原因。这取决于哪一个会先发生。

    但是,在初始渲染之后,返回的div将始终 有“本地容器”类和样式颜色:白色;

    只有在渲染时不再次更改className或样式时,情况才是这样。类似于使用状态:

    className={counter < 5 ? "global-container": 'new-class'}
    

    如果最初计数器小于5。首先,它将是“全球容器”。然后在你的useEffect之后,它将是“本地容器”。然后,当您递增计数器时,它将变为“新类”。