React 路由器从子节点更新父状态 class

Question

假设我的路线如下：

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

Base class 和 A class 如下：

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 and react-redux，但应该可以将其适应其他系统。思路是一样的。

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

React 路由器从子节点更新父状态 class

React router update parent state from children class

javascript

reactjs

react-router