如何使用USEREF改变元素的样式

Question

我想使用 useRef钩子更改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>
  );
};

但是，如果我单击按钮，则box的backgroundColor不会更改。

我还创建了一个简单的代码段，这说明了我的问题。

Answer 1

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

box.current.backgroundColor = "blue";

将(如果有效(将您的DOM元素修改为：

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

为了使它起作用，您需要通过style属性修改backgroundColor：

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

您的摘要的工作版本