将 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）是一个好习惯吗？或者我应该避免它？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）