将 React 类组件的方法分配给 mobx 可观察的好/坏做法？

如何解决将 React 类组件的方法分配给 mobx 可观察的好/坏做法？

我们在 React 应用程序中使用 mobx observable。我遇到了一个场景，我需要从组件外部调用一个 react 类组件。

我能想到的一种方法是在 root 组件中创建一个回调，并使用 props 将其一直传递到 Component X，并在回调中的 Component X 注入函数 delta。完成后，我可以将回调作为道具一直传递给 Component A 并在需要时执行操作。非常标准的 React 方式。

我想到的第二种方法是将方法赋值给 Component X 的 componentDidMount 中的 mobx observable 变量

Mobx 设置：

    import { observable } from 'mobx';
    
    class MobXStore {
        @observable externalCallback = undefined;
    }
    
    let mobxStore = new MobXStore();
    export default mobxStore

组件 X 设置：

import React,{ Component } from 'react';
import mobxStore from '../../store';

export default class ComponentX extends Component {

    componentDidMount() {
        mobxStore.externalCallback = this.delta;
    }

    delta = () => {
        // Perform something here
    }

    render() {
        return (
            <div>
                Component X
            </div>
        )
    }
}

组件 A 设置：

import React,{ Component } from 'react';
import mobxStore from '../../../store';

export default class ComponentA extends Component {

    onBtnClick = (x) => {
        mobxStore.externalCallback && mobxStore.externalCallback === "function" && mobxStore.externalCallback(x);
    }

    render() {
        return (
            <div>
                Component A
                <button onClick={()=>this.onBtnClick('param')}>Click here</button>
            </div>
        )
    }
}

我遵循的第二种方法（使用 mobx）是一个好习惯吗？或者我应该避免它？