在react钩子中的变量中具有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；bottom:string、right:string和color:string！｝"的参数不可分配给类型为"SetStateAction<｛高度：字符串；宽度：字符串；颜色：字符串；背景颜色"：字符串；位置：字符串；底部：字符串；右侧：字符串；｝>'。类型"｛position:字符串；bottom:字符串；right:字符串；color:字符串；｝"缺少类型"{height:字符串；width:字符串；colour:字符串；"background color"的以下属性：字符串；position:串；bottom：字符串；rigight:字符串；}"：高度、宽度；背景颜色"；

我如何实现同样的目标？我对反应和勾手很陌生。

Answer 1

您在这里有一个打字错误，

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

除此之外，一切都正常，这个位置在我的测试中得到了应用，在更正打字错误后再次检查