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>
  );
};

但是，如果我单击按钮，backgroundColor的{{1}}不会改变。

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

Answer 1

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

backgroundColor

（如果可行的话）将您的DOM元素修改为此：

box.current.backgroundColor = "blue";

要使其正常工作，您需要通过<div backgroundColor="blue" ... />属性修改backgroundColor：

style

Working version of your snippet

如何使用useRef更改元素的样式？

1 个答案: