ReactJs - TypeError: Невозможно назначить только для чтения свойство 'transform' объекта '# <Object>'

Question

Я планировал изменить встроенный CSS, наведя элемент. Но реакция взбесилась, потому что все свойства объекта 'style' в этом классе почему-то все только для чтения.

Но можно изменить его в методе render. Я искал сообщение об ошибке, многие люди получают это сообщение об ошибке, изменяя объект 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>
      );
   }
}

Невозможно прикрепить изображения, вот ссылка на сообщение об ошибке.

Снимок экрана с сообщением об ошибке

Answer 1

Единственный способ обновить свойство в реакции - обновить состояние с помощью 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)';