javascript - React 路由器从子类更新父状态

Question

假设我的路线如下:

<Route name="base" path="/" component={Base}>
  <Route name="A" path="/a" component={A}></Route>
</Route>

Base 类和A 类如下:

var Base = React.createClass({
  getInitialState() {
    return {current: 1}
  },
  render() {
    return (
      <div>{this.state.current}</div>
      <div>{this.props.children}</div>
    );
  }
});


var A = React.createClass({
  componentDidMount() {
    // how to set base class state
    // 
  },
  render() {
     ....
  }
});

我想从 A 的 componentDidMount 方法设置或更新 Base(this.state.current) 状态，应该怎么做我在现场做。

Answer 1

要完成这项工作，您最终可能会得到这样的结果:

var Base = React.createClass({
  getInitialState() {
    return {current: 1}
  },
  render() {
    return (
      <div>{this.state.current}</div>
      <div>{this.props.children}</div>
      <div>{this.props.demo}</div>
    );
  }
});

export default connect(state => ({
  demo: state.demo
}))(Base);

---

var A = React.createClass({
  componentDidMount() {
    // how to set base class state
    //

    this.props.setDemo('demo');
  },
  render() {
     ....
  }
});

export default connect(() => ({}), {
  setDemo
});

此解决方案基于 Redux和 react-redux , 但它应该可以适应其他系统。思路是一样的。

如果你使用 Redux，你需要实现一个 action 和一个 reducer 匹配上面的语义。