我打算通过将元素悬停来更改内联CSS。 但是,由于反应异常,该类中“样式”对象的所有属性都以某种方式只读。
但是可以使用“渲染”方法对其进行修改。 我搜索了错误消息,很多人通过修改props对象得到了此错误消息。但是这个错误甚至不在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>
);
}
}
还不能附加图像,因此这是错误消息的链接。
答案 0 :(得分:2)
在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)';
答案 1 :(得分:0)
您可以复制样式对象并更改副本:
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}
这可能会带来我不知道的负面影响。