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

【问题标题】：How to change style attribute of element with React Hooks?如何使用 React Hooks 更改元素的样式属性？
【发布时间】：2021-08-21 00:01:48
【问题描述】：

您好，我看过教程，但不知道如何在 React 中更改元素属性，例如单击按钮更改元素的宽度。使用 document.querySelector 的 vanilla 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

【问题讨论】：

标签： reactjs react-hooks attributes use-state use-ref

【解决方案1】：

您可以直接使用 style prop 更改样式

//
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

【讨论】：

效果很好，谢谢，我为切换部分添加了 if 语句。句柄可能拼错了！