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

您必须绑定Component方法以传递.this上下文。所以updateTitle = (title)=> {}

Answer 2

您应将this.updateTitle包裹在如下箭头功能中。然后，您可以从DashBoardPage调用updateTitle。

<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传递。

在React Router中呈现新状态

2 个答案: