问题描述
MobX 6.0.1的最新发行版的语法在我不了解的https://codesandbox.io/s/minimal-observer-p9ti4示例应用程序中出现。
代码是:
const TimerView = observer(({ timer }: { timer: Timer }) => (
<span>Seconds passed: {timer.secondsPassed}</span>
));
我已经看过并理解语法function({arg1,arg2})
,但不是
function({arg1: {arg1: arg2}})
,由于MobX文档没有帮助;我在这里问。
我尝试过的事情
因此,我查找了MobX观察者的文档,发现https://mobx.js.org/api.html#observer-1并没有帮助。它说:
observer
Usage: observer(component)
A higher order component you can use to make a functional or class based React component re-render when observables change.
我正在更多地浏览网站,但希望这个问题和即将推出的答案能够帮助其他人。
解决方法
这就是说,您的observer
回调函数包含一个带有timer
属性的对象参数。该timer
属性的类型为Timer
。
然后对该对象进行解构,以将timer
属性提取到变量timer
。
这样想吧
interface Timer {
secondsPassed: number
}
interface Component {
timer: Timer
}
const TimerView = observer((obj: Component) => (
<span>Seconds passed: {obj.timer.secondsPassed}</span>
));