web-dev-qa-db-fra.com

ReactJs - TypeError: impossible d'attribuer en lecture seule la propriété 'transform' de l'objet '# <Object>'

J'avais l'intention de changer le CSS en ligne en survolant l'élément. Mais réagissez flippé car toutes les propriétés de l'objet 'style' dans cette classe sont en quelque sorte toutes en lecture seule.

Mais c'est bien de le modifier dans la méthode 'render'. J'ai recherché le message d'erreur, beaucoup de gens obtiennent ce message d'erreur en modifiant l'objet props, mais celui-ci n'est même pas dans l'objet props. Des idées?

Voici mon code:

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>
      );
   }
}

Impossible de joindre des images pour le moment, voici donc le lien pour le message d'erreur.

Capture d'écran du message d'erreur

javascriptreactjsjsx
6
Hao Wu

La seule façon de mettre à jour la propriété dans react est de mettre à jour l'état avec setState. Vous pouvez également les placer à l'intérieur du crochet de rendu lui-même ou là où vous en avez besoin:

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)';

Ou, même vous pouvez les placer en dehors de la classe: (Ce serait la méthode préférée dans votre cas, car vous mettez à jour les propriétés dans les méthodes souhaitées)

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)';
2
Bhojendra Rauniyar

Vous pouvez copier votre objet de style et modifier la copie:

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>
  );
}

Pour le rendre encore plus propre, vous pouvez simplement fusionner les classes css via

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

hoveringStyle = {
    transform: 'scale(1.2)',
}

this.style  = {...style, ...hoveringStyle}

Cela peut avoir un effet secondaire négatif que je ne connais pas.

0
Markus Weber