Question

所以我有以下设置（这可能不是最好的方法，但请耐心等待）：

me.fireEvent('click', me, e)

这会导致@observer class ParentComponent extends Component { @observable.ref childComponent render() { return (<div> <ChildComponent ref={(ref)=> this.childComponent=ref}/> <button disabled={this.childComponent && this.childComponent.isBusy}/> </div>) } } @observer class ChildComponent extends Component { @observable isBusy = false // called at some point after render in response to a user action handleBusy() {this.isBusy = true} render() {…} }错误，这或多或少都会导致递归，因为在rending时会设置一个observable，这会触发渲染，导致observable被设置等等。我不相当得到这是无限递归的。看起来它在几个循环中是稳定的。）

我知道这可能是一种反模式，但无论如何都可以让它发挥作用吗？

Answer 1

最好将共享状态放在父组件中。

示例（JSBin）

@observer 
class ParentComponent extends Component {
  @observable isBusy = false;

  handleBusy = () => {
    this.isBusy = true;
  }

  render() {
    const { isBusy, handleBusy } = this;
    return <div>
      <ChildComponent onClick={handleBusy}/>
      <button disabled={isBusy}> Parent Button </button>
    </div>;
  }
}

@observer 
class ChildComponent extends Component {
  render() {
    const { onClick } = this.props;
    return <div>
      <button onClick={onClick}> Child Button </button>
    </div>;
  }
}

Mobx - React：对子组件引用上的可观察属性做出反应，导致无限递归

1 个答案: