在反应钩子中具有变量中的css属性

Question

我需要删除 html 元素的一些属性，并根据一些事件添加一些额外的属性。 我试图通过为所需的 css 属性创建一个对象变量并尝试在运行时通过将新的对象值分配给 css 变量来更改它来实现这一点。

这里是示例代码：

const MyCssVariableSample = (props) => {
  const [testCssVariable, setTestCssVariable] = useState({
    height: "100%",
    width: "100%",
    color: "purple",
  });

  return (
    <div>
      <h1>Welcome</h1>
      <button
        onClick={() => {
          setTestCssVariable({
            position: "absolute",
            bottom: "0",
            right: "0",
            color: "purple",
          }),
        }}
      >Hello there</button>
      <div className="xyz">
        <video id="abc" style={testCssVariable} />
      </div>
    </div>
  );
};

但我不能这样做，因为代码允许我更改已定义键的值但不引入键，所以在这种情况下，如果我想更改高度、宽度或颜色，那很好，但我无法引入位置、边距或任何其他新键。

这是错误：

'{ position: string; 类型的参数底部：字符串；右：字符串；颜色：字符串； }' 不可分配给 'SetStateAction'。输入'{位置：字符串；底部：字符串；右：字符串；颜色：字符串； }' 缺少来自类型 '{ height: string; 的以下属性；宽度：字符串；颜色：字符串； “背景色”：字符串；位置：字符串；底部：字符串；右：字符串； }'：高度，宽度，“背景颜色”

我怎样才能达到同样的效果？我对反应和钩子很陌生。

Answer 1

这里有错别字，

        onClick={() => {
          setTestCssVariable({
            position: "absolute",
            bottom: "0",
            right: "0",
            color: "purple",
          }), // <- ','
        }}

除此之外，一切正常，并且该职位在我的测试中得到应用，纠正错字后再次检查