ReactJs - 类型错误：无法将对象'#<Object>'的只读属性'transform'分配给只读属性

Question

我计划通过将鼠标悬停在元素上来更改内联 css。 但是反应吓坏了，因为这个类中"style"对象的所有属性在某种程度上都是只读的。

但是可以在"渲染"方法中修改它。 我搜索了错误消息，许多人通过修改 props 对象来获得此错误消息。但是这个甚至不在道具对象中。 有什么想法吗？

这是我的代码：

import React, { Component } from 'react';
export default class Game extends Component {
state = {
}
style = {
height: '200px',
backgroundImage: 'url()',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
transform: 'scale(1)'
}
onHover() {
this.style.transform = 'scale(1.2)';
}
render() {
const { game, onClick } = this.props;
const { img, name } = game;
this.style.backgroundImage = `url(${img})`;
this.style.transform = 'scale(1)';
return (
<div className="m-2"
style={this.style}
onClick={() => { onClick(this.props.game) }}
onMouseEnter={() => this.onHover()}
>{name}</div>
);
}
}

尚无法附加图像，因此这是错误消息的链接。

错误消息屏幕截图

Answer 1

在 react 中更新属性的唯一方法是使用 setState 更新状态。或者，您应该将它们放在渲染钩子本身或需要它们的位置：

render() {
const { game, onClick } = this.props;
const { img, name } = game;
const style = {
height: '200px',
backgroundImage: 'url()',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
transform: 'scale(1)'
}
// now, you can modify
style.backgroundImage = `url(${img})`;
style.transform = 'scale(1)';

或者，即使你可以将它们放在类之外：(在您的情况下，这将是首选方法，因为您正在更新所需方法中的属性(

const style = {
height: '200px',
backgroundImage: 'url()',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
transform: 'scale(1)'
}
export default class Game extends Component {
render() {
// modifying style
style.backgroundImage = `url(${img})`;
style.transform = 'scale(1)';

Answer 2

您可以复制样式对象并更改副本：

render() {
const { game, onClick } = this.props;
const { img, name } = game;
// make a copy
let changedStyle = {
...this.style
}
// change the copy
changedStyle.backgroundImage = `url(${img})`;
changedStyle.transform = 'scale(1)';
return (
<div className="m-2"
style={changedStyle}
onClick={() => { onClick(this.props.game) }}
onMouseEnter={() => this.onHover()}
>{name}</div>
);
}

---

为了使它更加干净，您可以通过以下方式合并css类

style = {
height: '200px',
backgroundImage: 'url()',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
transform: 'scale(1)',
}
hoveringStyle = {
transform: 'scale(1.2)',
}
this.style  = {...style, ...hoveringStyle}

这可能会产生我不知道的负面副作用。