如何使用 React Hooks 更改元素的样式属性？

Question

您好，我看过教程，但不确定如何在 React 中更改元素属性，就像单击按钮更改元素的宽度一样。使用 document.querySelector 的香草 javascript 很容易做到这一点。但它是如何在 React 中完成的？状态？或使用参考？它说要避免引用过多，那么有没有 useState 方法可以做到这一点？切换宽度是我的目标，但我们不胜感激任何建议。我认为我不应该使用 document.querySelector...

我的尝试：

const myRef = useRef("80%");
  const changeWidth = () => {
    widthRef.style.width = "100px";
  };

<div>
  <div style ={{width:400px, height: 400px}} ref ={myRef}>
  <button onClick={changeWidth}></button>
</div

Answer 1

您可以直接使用样式属性更改样式

//
const [width, setWidth] = useState("400px")

function hanldeWidthChange() {
   // you can set width to any value you want
   setWidth("100px")
}

<div>
  <div style ={{width: width, height: "400px"}}>
      <button onClick={() => hanldeWidthChange()} ></button>
  </div>
</div

如何使用 React Hooks 更改元素的样式属性？

How to change style attribute of element with React Hooks?

attributes

reactjs

react-hooks

use-state

use-ref