ReactJs - TypeError：无法分配给对象'#<Object>'的只读属性'transform'答案

【问题标题】：ReactJs - TypeError: Cannot assign to read only property 'transform' of object '#<Object>'ReactJs - TypeError：无法分配给对象'#<Object>'的只读属性'transform'
【发布时间】：2019-02-08 02:44:06
【问题描述】：

我打算通过悬停元素来更改内联 css。但是反应吓坏了，因为这个类中“样式”对象的所有属性都是只读的。

但是可以在'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>
      );
   }
}

还不能附加图片，所以这里是错误消息的链接。

Error message screenshot

【问题讨论】：

“样式”是否可能是组件的保留属性，因此被视为只读？抱歉，我以前没有见过这个只读问题，所以我很好奇将“样式”重命名为其他内容是否可行。
不幸的是，这是我尝试的第一件事，但没有奏效。我在下面的 Bhojendra Rauniyar 的回答中发现了这一点。谢谢

标签： javascript reactjs jsx

【解决方案1】：

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

【讨论】：

就是这样！我将样式对象放在 render 方法中，然后通过 onHover 方法修改的状态对象内部的标志值修改变换。一切都按现在应该的方式工作。谢谢！
如果对象是嵌套的则不起作用，例如 let styles= { root:{ color:'white' } } 收到相同的错误

【解决方案2】：

您可以复制您的样式对象并更改副本：

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}

这可能会产生我不知道的负面影响。

【讨论】：