сделать новое состояние в реагировать маршрутизатор

Question

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

class Header extends React.Component {
  state = {
    title: '',
  };

  updateTitle(title) {
    this.setState({ title });
  }

 render() {
    const { title } = this.state;

    return (
          <Typography>
              {title}
            </Typography>

<Switch>
            <Route
              exact
              path="/"
              render={() => (<DashboardPage updateTitle={this.updateTitle} />)}
              title="Dashboard"
            />

            <Route
              path="/payment"
              render={() => (<PaymentPage updateTitle={this.updateTitle} />)}
              title="Payment"
            />

          </Switch>
)};

Answer 1

Вы должны обернуть this.updateTitle в функцию стрелки, как показано ниже. Затем вы можете вызвать updateTitle из DashBoardPage.

<Route
    path="/dashboard"
    render={() => (<DashBoardPage updateTitle={(title) => this.updateTitle(title)} />)}
    title="Dashboard"
/>

Например, ваш компонент DashBoardPage может выглядеть примерно так, как показано ниже. Вызывая updateTitle, который мы передали как реквизит, мы меняем заголовок в родительском компоненте.

DashBoardPage.js

const DashBoardPage = ({ updateTitle }) => {
    updateTitle('paymentPage');
    return <div>This is the dashboard page</div>;
};

Однако я бы настоятельно рекомендовал не делать этого. Лучшим подходом было бы иметь компонент Page. Затем DashBoardPage и PaymentPage возвращают компонент Page и передают заголовок как prop.

Answer 2

Вы должны связать метод Component для передачи .this контекста. Итак updateTitle = (title)=> {}