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

Question

在我做的项目中，依赖注入的使用非常广泛。

有这样的代码

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 } ) => {...}

或

const anotherObserverB = mboxReact.observer( { title, extraFunction }:
    { title: string, extraFunction:() => void } ) => {...}

我希望能够识别传递给 prop b 的对象。是否有一个简单的判断，例如，观察者在开发控制台中是否有道具 extraFunction？

目前如果我在控制台输入a，我只能看到

而且信息量不是很大。

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} />

现在您想知道 b 传递给 a 的值是多少。它在道具下可用：

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

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

How to discover a mobx observer's properties in a browser's dev console?

typescript

mobx-react

完整代码