javascript - ReactJs - TypeError: Cannot assign to read only property 'transform' of object '#<Ob

admin管理员组

文章数量:1292115

I was planning to change the inline css by hovering the element. But react freaked out cuz all the properties of the 'style' object in this class are somehow all readonly.

But it is fine to modify it in 'render' method. I searched the error message, many people get this error message by modifying the props object.But this one is not even in the props object. Any ideas?

Here's my 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>
      );
   }
}

I was planning to change the inline css by hovering the element. But react freaked out cuz all the properties of the 'style' object in this class are somehow all readonly.

But it is fine to modify it in 'render' method. I searched the error message, many people get this error message by modifying the props object.But this one is not even in the props object. Any ideas?

Here's my 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>
      );
   }
}

Can't attach images yet, so here's the link for the error message.

Error message screenshot

• javascript
• reactjs
• jsx

Share Improve this question Follow asked Sep 3, 2018 at 4:07 Hao WuHao Wu 20.9k66 gold badges3636 silver badges7878 bronze badges 2

• 1 Is it possible that "style" is a reserved property of ponents, and hence is treated as read only? Sorry, I've not seen this readonly issue before, so am curious if renaming "style" to something else would work. – Chris Cousins Commented Sep 3, 2018 at 4:15
• Unfortunately that's the first thing I've tried, but didn't work. I figured it out by Bhojendra Rauniyar's answer below. Thanks <3. – Hao Wu Commented Sep 3, 2018 at 4:49

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

The only way to update the property in react is to update the state with setState. Alternatively, you should place them inside the render hook itself or where you require them:

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

Or, even you may place them outside the class: (This would be preferred method in your case because, you're updating the properties in desired methods)

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

You can copy your style object and change the copy:

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

---

To make it even cleaner, you could just merge css classes 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}

This may have a negative side effect that i don't know about.

本文标签：