代码之家 › 专栏 › 技术社区 › Hao Wu

ReactJs-TypeError:无法分配给对象“#<object>”的只读属性“transform”

jsx reactjs javascript

Hao Wu · 技术社区 · 7 年前

我计划通过悬停元素来更改内联css。但是react吓坏了,因为这个类中“style”对象的所有属性都是只读的。

我搜索了错误消息,很多人通过修改道具得到了这个错误消息反对。但是这个甚至不在道具对象中。有什么想法吗?

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

1 回复 | 直到 7 年前

Bhojendra Rauniyar 7 年前

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

Markus Weber 6 年前

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

为了更简洁,您可以通过

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

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

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前