Question

我正在构建一个React + Mobx应用程序，我有一个组件无法呈现任何内容的情况，因为它全部基于第三方地图API，但我需要对一些商店属性更改做出反应：< / p>

componentDidMount() {
   mapApi.doSomething(this.props.store.value)
}

componentWillReact() {
   mapApi.doSomething(this.props.store.value)
}

render () {
   //workaround to make componentWillReact trigger
   console.log(this.props.store.value) 
   return null
}

有没有一种优雅的方式来实现它？

Answer 1

如果我理解正确，你想对渲染功能中没有使用的东西做出反应。你可以这样做：

@observer 
class ListView extends React.Component {
   constructor(props) {
      super(props)
   }

@observable filterType = 'all'

handleFilterTypeChange(filterType) {
  fetch('http://endpoint/according/to/filtertype')
    .then()
    .then()
}

  // I want the method that autoruns whenever the @observable filterType value changes
 hookThatDetectsWhenObservableValueChanges = reaction(
    () => this.filterType,
    filterType => {
      this.handleFilterTypeChange(filterType);
    }
 )
}

这里提到了这个解决方案https://github.com/mobxjs/mobx-react/issues/122#issuecomment-246358153

Answer 2

您可以使用shouldComponentUpdate

shouldComponentUpdate() {
  return false; // would never rerender.
}

Answer 3

这是我的解决方案。调用一个空函数告诉mobx您确实使用了道具。

const doNothing = () => {
    // do nothing;
};

class Test extends React.component {
    componentDidMount() {
       mapApi.doSomething(this.props.store.value)
    }

    componentWillReact() {
       mapApi.doSomething(this.props.store.value)
    }

    render () {
        doNothing(this.props.store.value);
        return null
    }
}

如何在不使用mobx进行渲染的情况下对道具变化作出反应

3 个答案: