Question

假设我的myCurrentState组件值为0。当我路由到ConfirmComponent（/）时，我想将其更改为1；当路由回到RootComponent（/ confirm）时，我想将其更改为0。

class MySpecialComponent extends Component {
  constructor() {
    super();
    ...
  }
}

state = {
  myCurrentState: 0,
};

<Router>
  <div>
    <Route
      path="/"
      render={() => <RootComponent />}
      exact
    />
    <Route path="/confirm" render={() => <ConfirmComponent />} />
  </div>
</Router>

我可以找到的大多数示例（matchPath，match）是将代码添加到子组件中的示例。但是我想在这个主要的MySpecialComponent组件中完成所有操作。

如果可能的话，有人可以给我举个例子吗？

Answer 1

就像我们在评论中讨论的那样，如果您可以在子代中添加代码很好，这是一种可能的解决方案

class MySpecialComponent extends Component {
  constructor() {
    super();
    ...
  }

changeValue = (value) => {
  this.setState({myCurrentState: value});
}

state = {
  myCurrentState: 0,
};

render = () => <Router>
  <div>
    <Route
      path="/"
      render={() => <ConfirmComponent updateParentState={() => this.changeValue(1)}/>}
      exact
    />
    <Route path="/confirm" render={() => <RootComponent updateParentState={() => this.changeValue(0)} />} />
  </div>
</Router>;
}

仅供参考，我想您可能会根据自己的意愿在示例中混合使用Root和Confirm组件。

在子组件中

class RootComponent extends Component {
  constructor(props){
    super(props)
    this.props.updateParentState(); //updates state of parent
  }
  ...
}
class ConfirmComponent extends Component {
  constructor(props){
    super(props)
    this.props.updateParentState(); //updates state of parent
  }
  ...
}

我可以在没有子组件的情况下使用matchPath吗？

1 个答案: