如何在 React class 组件的属性中访问 state？

Question

I've got a React Class Component of which I would like to separate a part of the rendered JSX but I don't seem to be able to get the Component's state within the separated JSX (as a property of the class).

The actual situation is very similar to this example

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      x: 1
    };
  }

  button = (
    <button onClick={() => this.setState({ x: 2 })}>{this.state.x}</button>
  );

  render() {
    return (
      <>
        x = {this.state.x}
        <button onClick={() => this.setState({ x: 2 })}>{this.state.x}</button> // this works!
        {this.button} // this doesn't :(
      </>
    );
  }
}

Now, when I try to read this.state.x directly in the render() method, it works as expected, but when I put the code in the button property and inject it in the render() method by calling this.button inside brackets then this.state is undefined and I'm unable to read the state.

I tried using an utility method like getX = () => this.state.x and called it inside the button property but it doesn't get the state.

I also tried setting another property _this = this and calling this._this.getX inside the brackets. This didn't work either.

Any idea on how to get it to work? Any help is appreciated!

Answer 1

Using arrow function you will get the implicit reference of the component instance:

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      x: 1
    };
  }

  renderButton = () => (
    <button onClick={() => this.setState({ x: 2 })}>{this.state.x}</button>
  );

  render() {
    return (
      <>
        x = {this.state.x}
        <button onClick={() => this.setState({ x: 2 })}>{this.state.x}</button>
        {this.renderButton()}
      </>
    );
  }
}

Using function syntax, you need to bind this in constructor:

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      x: 1
    };
    renderButton = renderButton.bind(this);
  }

  renderButton() {
    return <button onClick={() => this.setState({ x: 2 })}>{this.state.x}</button>
  };

  render() {
    return (
      <>
        x = {this.state.x}
        <button onClick={() => this.setState({ x: 2 })}>{this.state.x}</button>
        {this.renderButton()}
      </>
    );
  }
}