Как изменить private @ mobx.observable.ref состояние mobx через реквизит? - PullRequest
Новая
       7

Как изменить private @ mobx.observable.ref состояние mobx через реквизит?

0 голосов
/ 20 февраля 2019

В настоящее время мой класс определяется следующим образом: 

type ClapWidgetProps = {
  animate: boolean,

};

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

Эта наблюдаемая animate управляет некоторым анимационным эффектом внутри виджета.

Как видите, внутреннее состояние animate isинициализируется this.props.animate.

Чего я хочу добиться, так это того, что я хочу иметь возможность непрерывно изменять значение наблюдаемой animate через this.props.animate даже после инициализации.

Как я могу позволить this.props.animate переопределитьanimate когда свойство изменяется?

Ответы [ 2 ]

0 голосов
/ 27 февраля 2019

MobX полностью соответствует stores состоянию вашего приложения.В вашем примере у вас есть 2 источника свойства animate, которые (внутри вашего 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.

0 голосов
/ 21 февраля 2019

В случае, если вам нужно управлять анимацией как изнутри, так и из внешнего компонента, вам необходимо воспользоваться методами жизненного цикла 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
...