ReactJs-TypeError:无法分配为只读对象“#< Object>"的属性"transform" [英] ReactJs - TypeError: Cannot assign to read only property 'transform' of object '#<Object>'

问题描述

我打算通过将元素悬停来更改内联CSS. 但是，由于反应异常，该类中样式"对象的所有属性都以某种方式全部为只读.

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.

但是可以用'render'方法修改它. 我搜索了错误消息，很多人通过修改props对象获得了此错误消息.但是，即使在props对象中也没有此错误消息. 有什么想法吗?

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?

这是我的代码:

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.

错误消息屏幕截图

推荐答案

在react中更新属性的唯一方法是使用setState更新状态.另外，您应该将它们放置在渲染钩子内部或需要它们的位置:

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

这篇关于ReactJs-TypeError:无法分配为只读对象“#< Object>"的属性"transform"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！