[未安装两个组件时如何在React中调用函数？

Question

当要卸载单个React组件时调用（redux）函数可以通过在componentWillUnmount内部调用该函数来完成。但是我想知道当未安装两个React组件（位于单独的URL后）时如何调用（redux）函数。这是一个例子：

class App extends React.Component {
  render() {
    return (
      <Router history={history}>
        <Switch>
          <Route component={Foo} ... />
          <Route component={Bar} ... />
          // Many other routes
        </Switch>
      </Router>
    );
  }
}

class Foo extends React.Component<Props, State> {
    componentWillUnmount() {
        if (!navigated_to_bar()) {
            alert("Clear state");
        }
    }
}

class Bar extends React.Component<Props, State> {
    componentWillUnmount() {
        if (!navigated_to_foo()) {
            alert("Clear state");
        }
    }
}

我只想在用户离开Foo和Bar组件后才调用alert；他们可以根据需要在这些组件之间进行多次导航，而无需触发alert调用。

我正在寻找的解决方案方面相当灵活：我希望我需要架构上的转变。我在想解决方案可能是使Foo / Bar具有一个公共父组件并以某种方式调整Router。

Answer 1

最简单的解决方案是使用父级->子级层次结构并从那里进行更新。这是典型的react约定；传递一个允许您更新父母状态的功能。

class App extends React.Component {
  componentDidMount() {
    this.state = {
      routedToFoo: null,
      routedToBar: null
    }
  }

  componentDidUpdate(_, prevState) {
     if (prevState.routedToFoo !== this.state.routedToFoo &&
            prevState.routedToBar !== this.state.routedToBar) {
          if (this.state.routedToFoo === false && this.state.routedToBar === false) 
              alert("Clear state");
      }
  }

  /* -- snip -- */
     <Route component={<Foo setRouted={routedToFoo => this.setState({ routedToFoo })} ... />
     <Route component={<Bar setRouted={routedToBar => this.setState({ routedToBar })}/>} ... />
  /* -- snip -- */
}

然后在Bar and Foo内部：

componentDidMount() {
   this.props.setRouted(true);
}

componentWillUnmount() {
    this.props.setRouted(false);
}

这里我正在处理componentDidUpdate中的副作用。我们侦听两个值是否均为假，并且至少一个值已从先前状态更新，然后我们调用“清除状态”警报。

但是，如果这不够灵活，那么您可能要考虑使用redux。https://redux.js.org/introduction/getting-started

或Context：https://reactjs.org/docs/context.html