如何在浏览器的开发控制台中发现mobx观察者的属性？

Question

在我正在工作的项目中，依赖注入被广泛使用。

有这样的代码

os.path.join(root, file)

上面道具type BigWidget = { title: string, } const AProps = { b: BigWidget } class A extends React.Component<AProps> { ... } ... const a = <A b={observerB} /> 的问题在于它可以通过多种方式创建

b

或

import * as mobxReact from 'mobx-react';
const observerB = mboxReact.observer( { title }: { title: string } ) => {...}

我希望能够确定已将什么对象传递给prop const anotherObserverB = mboxReact.observer( { title, extraFunction }: { title: string, extraFunction:() => void } ) => {...} 。例如，观察者是否有一个道具b是否在开发人员控制台中很简单？

当前，如果我在控制台中输入extraFunction，这就是我所能看到的

它不是非常有用。

Answer 1

将编译的简化代码：

export type AProps = {
  b: any
}

export class A extends React.Component<AProps> {
  render() {
    return <div />
  }
}

const observerB = observer(() => { return <div /> });

const a = <A b={observerB} />

现在，您想知道传递给a的b的值是什么。在道具下可用：

console.log(a.props['b'] === observerB); // True

完整代码

export type AProps = {
  b: any
}

export class A extends React.Component<AProps> {
  render() {
    return <div />
  }
}

const observerB = observer(() => { return <div /> });

const a = <A b={observerB} />
console.log(a); // What you have 
console.log(a.props['b'] === observerB); // True