Question

目前，我的班级是这样定义的：

type ClapWidgetProps = {
  animate: boolean,

};

export class Widget extends React.Component<WidgetProps> {
  @mobx.observable.ref private animate: boolean = this.props.animate || false;

这个可观察的animate控制着小部件内部的某些动画效果。

如您所见，内部状态animate由this.props.animate初始化。

我想要实现的是，即使初始化后，我也希望能够通过animate连续更改可观察的this.props.animate的值。

更改属性后，如何让this.props.animate覆盖可观察的animate？

Answer 1

如果需要从内部和外部组件控制动画，则需要从React生命周期方法中受益

@observer
export class Widget extends React.Component<WidgetProps> {
  @observable private animate: boolean = this.props.animate || false;

  toggleAnimate = () => {
    this.animate = !this.animate;
  }

  componentDidUpdate(prevProps) {
    if (prevProps.animate !== this.props.animate) {
      this.animate = this.props.animate;
    }
  }

  render() {
     // call  this.toggleAnimate to change animate from inside component
  }
}

从外部

// some jsx

<Widget animate={this.state.animate} />

// and if outer component this.state.animate changes - it will cause a change of Widget animate prop

Answer 2

MobX与stores有关，它们是应用程序的状态。在您的示例中，您有2个动画属性来源（在Widget组件内以及以Widget传递给prop的外部）不是一个好习惯。

这是设置应用程序的更好方法

class Store {
    @observable animate = false;

    @action
    setAnimate(animate) {
        this.animate = animate;
    }
}

@inject('store')
class Widget extends React.Component {
    toggleAnimate = () => {
        const { store } = this.props;
        store.setAnimate(!store.animate);
    }

    render() {
        const { animate } = this.props.store;
        // whenever animate changes in your store render method will trigger
    }
}

请注意，该示例不起作用，因为您必须在应用程序的根目录级别设置Provider。有关更多信息，请参见Provider and inject https://github.com/mobxjs/mobx-react部分。

您可以在https://mobx.js.org/best/store.html上找到有关定义商店的更多信息。

如何通过道具更改私有@ mobx.observable.ref mobx状态？

2 个答案: