如何在 React 的状态下设置 css 样式？答案

【问题标题】：How do I set css style in states on React?如何在 React 的状态下设置 css 样式？
【发布时间】：2021-05-24 03:19:48
【问题描述】：

我正在尝试使用此语句为元素设置更新后的大小。

const [size, setSize] = useState({});

我想说明我的初始尺寸：

transform: scale(1, 1) translate3d(0, 0, 0);

点击元素后，我想将我的元素放大为：

transform: scale(2, 2) translate3d(0, 0, 0);

这就是我将如何触发元素更新到新的 setSize。

const onClickHandler = (event) => {
setSize= transform: scale(2, 2) translate3d(0, 0, 0);
}

【问题讨论】：

标签： css reactjs state

【解决方案1】：

您可以执行以下操作之一：

选项 1

const [style, setStyle] = useState({});

const onClickHandler = () => setStyle({
  transform: "scale(2, 2) translate3d(0, 0, 0)"
});

return (
  <div style={style}>
    {/* some components */}
  </div>
);

选项 2

const [scale, setScale] = useState(1);
const style = useMemo(() => ({ // to prevent unnecessary re-rendering
  transform: `scale(${scale}, ${scale}) translate3d(0, 0, 0)`
}), [scale]);
const onClickHandler = () => setScale(2);


return (
  <div style={style}>
    {/* some components */}
  </div>
);

【讨论】：

谢谢！选项 2 效果非常好，我将继续使用这种格式。 :) 我正在尝试找到一种方法以“样式”堆叠 css 行以在缩放时使元素居中。您认为这是添加 css 行的正确方法吗？

const style = useMemo(() => ({ // 防止不必要的重新渲染 transform: scale(${scale}, ${scale}) translate3d(0, 0, 0), transformOrigin: center }), [scale]); const onClickHandler = () => setScale(2);
如果 transformOrigin: center 是您要添加的 CSS，那么当然可以。