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

Question

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

错误：

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
  }

}

单击按钮时发生错误。

将样式移出 class:

时会产生同样的错误

var styler = {
    color:"white",
}

Answer 1

将您的代码更改为 -

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

    }

Answer 2

在 class 中应使用 this 关键字。但是要查看 React 中的变化，您应该使用 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>

编辑
作为您评论的跟进：

But out of curiosity, my this.styler.color variable never changes in code, i know it wont call render but it doesnt even change the variable in code and just gives the error, why is that?

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

JavaScript classes are introduced in ECMAScript 6 and are syntactical sugar over JavaScript's existing prototype-based inheritance. The class syntax is not introducing a new object-oriented inheritance model to JavaScript. JavaScript classes provide a much simpler and clearer syntax to create objects and deal with inheritance.

在您的代码中，您使用了 public 关键字，我在此上下文中不熟悉它（是否打字错误？） + 您应该初始化对象在 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"));

<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>

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

React error on changing the inline-style of a component

javascript

inline-styles

typescript

reactjs