Состояние не обновляется при изменении реквизита

Question

Я учился реагировать на «React docs» несколько дней, и сегодня у меня возникли проблемы. Ссылка на документы: https://reactjs.org/docs/conditional-rendering.html#element -переменные .

Упражнение состоит в том, что при нажатии кнопки текст будет изменяться. В документах они делали это с функциями, и это работает отлично, но я пробовал это с классами.

Проблема в том, что состояние не обновляется при изменении свойств, оно имеет только начальное значение. Я борюсь с этим с 2 часов и не нашел решения. Я новичок в React, поэтому проявите терпение.

Код:

class UserGreeting extends React.Component {
  render() {
    return (
      <h1>Welcome back!</h1>
    );
  }
}

class GuestGreeting extends React.Component {
  render() {
    return (
      <h1>Please sign up!</h1>
    );
  }
}

class Greeting extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isLoggedIn: this.props.isLoggedIn};
  }

  render() {
    let isLoggedIn = this.state.isLoggedIn;

    if (isLoggedIn) {
      return <UserGreeting />;
    }
    return <GuestGreeting />;
  }
}

class LoginButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {onClick: this.props.onClick};
  }

  render() {
    return (
      <button onClick={this.state.onClick}>Login</button>
    );
  }
}

class LogoutButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {onClick: this.props.onClick};
  }

  render() {
    return (
      <button onClick={this.state.onClick}>Logout</button>
    );
  }
}

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isLoggedIn: true};
  }

  handleLoginClick = () => {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick = () => {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;
    if (isLoggedIn) { 
      button = <LogoutButton onClick={this.handleLogoutClick} />;    
    } else {      
      button = <LoginButton onClick={this.handleLoginClick} />;    
    }
    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
          {button}     
       </div>
    );
  }
}


ReactDOM.render(
  <LoginControl />,
  document.getElementById('root')
);

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

Answer 1

Вы сохраняете свой ответ в состоянии компонента Greeting внутри конструктора. Конструктор будет вызываться только один раз в компоненте монтирования.

Измените компонент Greeting с помощью кода ниже **

class Greeting extends React.Component {
  render() {
    let isLoggedIn = this.props.isLoggedIn;
    if (isLoggedIn) {
      return <UserGreeting />;
    }
    return <GuestGreeting />;
  }
}