reactjs - 如何使用 useRef 改变元素的样式？

Question

我想使用 useRef Hook 来更改 DOM 元素的样式:

const Box = props => {
  const box = useRef(0);

  const onClick = () => {
    box.current.backgroundColor = "blue";
  };

  return (
    <div>
      <div
        ref={box}
        style={{ width: "300px", height: "300px", backgroundColor: "red" }}
      />
      <button onClick={onClick}>Change color of box</button>
    </div>
  );
};

但是，如果我点击按钮， backgroundColor 的 box 不会改变。

我还创建了一个 simple code snippet ，它说明了我的问题。

Answer 1

您正在尝试直接在 DOM 元素上修改不存在的 backgroundColor 属性:

box.current.backgroundColor = "blue";

哪个(如果有效)将您的 DOM 元素修改为:

<div backgroundColor="blue" ... />

为了使其工作，您需要通过 backgroundColor属性修改 style:

box.current.style.backgroundColor = "blue";

Working version of your snippet