Question

我想在某个事件上更改组件元素的样式，例如单击。但是当我这样做时，我得到的错误是我的样式对象是只读的，当它没有被定义为这样且因此是不可变的。即使在类外定义样式对象也会产生相同的错误。我创建了一个简单的例子来说明我的问题。

错误：

Uncaught TypeError: Cannot assign to read only property 'color' of object '#<Object>'

profile.tsx

import * as React from 'react';

export default class Profile extends React.Component {

  public styler = {
        color:"white",
  }

  render() {
    return (<button style={this.styler} onClick={this.HandleMenuClick.bind(this)}>Click me!</button>);
  }

  HandleMenuClick() {
    this.styler.color = 'gray'; // error on executing this line
  }

}

点击按钮时出错。

在课堂外移动样式时会产生相同的错误：

var styler = {
    color:"white",
}

Answer 1

您应该在课堂内使用this关键字。但要查看更改，您应该使用state。

这是一个小例子：

class Profile extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      styler:{
        color: "white"
      }
    }
  }

  render() {
    const {styler} = this.state;
    return (
      <button style={styler} onClick={this.HandleMenuClick}>
        Click me!
      </button>
    );
  }

  HandleMenuClick = () => {
    const { styler } = this.state;
    this.setState({styler: {
      ...styler,
      color: 'gray',
      backgroundColor: '#000'
    }})
  };
}

ReactDOM.render(<Profile />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

修改
作为评论的后续内容：

但出于好奇，我的this.styler.color变量永远不会改变   代码，我知道它不会调用渲染，但它甚至不会改变   代码中的变量只是给出了错误，为什么呢？

正如我上面提到的，您应该使用this关键字将对象附加到class，基本上只有sugar around the prototype pattern


ECMAScript 6中引入了JavaScript类，并且是语法   在JavaScript现有的基于原型的继承上加糖。该   类语法不引入新的面向对象的继承   模型到JavaScript。 JavaScript类提供了更简单的方法   更清晰的语法来创建对象和处理继承。

在你的代码中，你使用了我在此上下文中不熟悉的public关键字（这是一个错字吗？） + 你应该初始化{{1}内的对象}}

这是一个对象被突变的例子：

constructor

class Profile extends React.Component { constructor(props) { super(props); this.myObject = { myKey: "Hi there!" }; } render() { return <button onClick={this.HandleMenuClick}>Click me!</button>; } HandleMenuClick = () => { console.log(this.myObject); this.myObject = { myKey: "Bye there!" }; console.log(this.myObject); }; } ReactDOM.render(<Profile />, document.getElementById("root"));

Answer 2

将您的代码更改为 -

import * as React from 'react';

    export default class Profile extends React.Component {
      constructor()
      {
        super();
        this.state.styler = {
            color:"white"
          }
      }


      render() {
        return (<button style={this.styler} onClick={this.HandleMenuClick.bind(this)}>Click me!</button>);
      }

      HandleMenuClick() {
        this.setState({'styler' : {'color':'gray'}});
      }

    }

更改组件的内联样式时出现错误

2 个答案: