如何在功能性反应组件中操作 html 元素的样式？

Question

我正在尝试在 react 中操作 html 元素的样式属性。

起初我以为我可以创建一个对象

let style = {
  position: "absolute",
  top: "705px",
  left: "0px",
  border: "0px solid red",
  zindex: "3",
};

然后尝试像这样操作 html 元素；

style["left"] ="250px";

<canvas
   ref={ref_yazi}
   style={style}
   width={100}
   height={100}
/>

但它给了我一个错误，我发现对象只能在严格模式下读取，所以我环顾四周并找到了一些解决方案，但通常所有这些都是基于类的组件（使用 this.state），我正在使用功能组件使用状态（）。

所以我的问题是，如何在具有 usestate 的功能组件中实现这一点？

Answer 1

您也可以使用useState使您的样式对象（或只是其中的一些道具）有状态。 例如：

const MyComponent = () => {
  const [style, setStyle] = useState({
    position: "absolute",
    top: "705px",
    left: "0px",
    border: "0px solid red",
    zIndex: "3"
  });

  const setStyleProp = (prop, value) => {
    setStyle({
      ...style,
      [prop]: value
    })
  }

  return (
    <React.Fragment>
      <div style={style}>Hello</div>
      <button onClick={() => setStyleProp('left', '250px')}>
        Change left
      </button>
    </React.Fragment>
  )
}

因此，您现在可以调用setStyleProp('left', '250px')在有状态对象上设置所需的样式道具。

编辑：这是一个演示这一点的代码沙盒。

Answer 2

Externalisez ses 样式可能对您有所帮助。 您需要在包含所有样式的样式对象中创建一个函数，然后在 reactJS 的样式属性中调用此方法。