在 React 中查找文本元素的颜色

Posted 2023-02-25

【中文标题】在 React 中查找文本元素的颜色

【英文标题】：Find Color of Text Element in React

【发布时间】：2021-10-04 21:28:32

【问题描述】：

我有一个链接组件，我想知道文本的颜色是什么。我将如何在 React 中做到这一点？

我知道使用 Vanilla JS，您可以使用 element.style.color 找到它，但是如果我使用 textEl.style.color 执行以下代码类似的操作，我会得到 undefined。

export function TextLink( children, path, inline = false, dash = false : TextLinkProps) 
  const textEl = useRef("");
  return (
    <StyledLink href=path inline=inline dash=dash ref=textEl>
      children
    </StyledLink>
  );

【参考方案1】：

您可以使用window.getComputedStyle() 并通过其ref 传递元素本身，如下所示：

const ref = React.useRef();
...
...
...

React.useEffect(() => 
  const style = window.getComputedStyle(ref.current)
  console.log(style.color); // rgb(255, 0, 0) 
, []);

Window.getComputedStyle()

【参考方案2】：

给我rgb(0, 0, 0)

const textEl = React.useRef(null);

  React.useEffect(() => 
    if (textEl.current) 
      console.log(window.getComputedStyle(textEl.current).color)
    
  , [textEl])

或者如果你不需要计算一个，就直接使用textEl.current.style.color

【参考方案3】：

您在参考时忘记了“当前”。像这样写：

textEl.current.style.color