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

Question

我有一个 Link 组件，我想知道文本的颜色是什么。我将如何在 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>
  );
}

Answer 1

给我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

Answer 2

您可以使用 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()

Answer 3

您忘记了 'current' 和您的参考资料。像这样写：

textEl.current.style.color

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

Find Color of Text Element in React

javascript

reactjs

use-ref