Реактивная функция рендеринга не обновляется

Question

У меня есть следующий код - я хотел бы изменить компонент реагирования, отображаемый при нажатии кнопки. Однако нажатие кнопки ничего не делает. Это родительский класс:

export default class SupportsContent extends React.Component {
  currentPage = "userSupportsList";
  goToPage = page => {
    this.currentPage = page;
  }
render() {
    let content = "";
    if (this.currentPage === "userSupportsList") {
      content = <UserSupportsList goToPage={this.goToPage} />
    } else if (this.currentPage === "chooseNewSupport") {
      content = <ChooseNewSupport goToPage={this.goToPage} />
    } else if (this.currentPage === "editSupport") {
      content = <EditSupport goToPage={this.goToPage} />
    } 
    return (
      <Grid>
        {content}
      </Grid>
    );
  }
}

У меня есть следующие определения дочерних компонентов:

function UserSupportsList(props) {
  return (
    <ListItem button onClick={function () {props.goToPage("chooseNewSupport");}}></ListItem> 
  );
}
function ChooseNewSupport(props) {
  return (
    <p>Choose New Support</p>
    );
}

function EditSupport(props) {
  return (
    <p>Edit Support</p>
    );
}

Answer 1

React обновляет компонент на основе двух условий: если либо реквизиты компонента изменяются, либо состояние обновляется с помощью функции this.setState.

Я рекомендую отредактировать компонент, чтобы использовать состояние вместо переменной:

class SupportsContent extends Component {
    state = {
        currentPage: "userSupportsList"
    }

    goToPage = page => this.setState({ currentPage: page })

    render() {
        let content = "";
        if (this.state.currentPage === "userSupportsList") {
            content = <UserSupportsList goToPage={this.goToPage} />
        } else if (this.state.currentPage === "chooseNewSupport") {
            content = <ChooseNewSupport goToPage={this.goToPage} />
        } else if (this.state.currentPage === "editSupport") {
            content = <EditSupport goToPage={this.goToPage} />
        } 
        return (
            <Grid>
                {content}
            </Grid>
        );
    }
}