Javascript MobX，是否无法在与相关组件相同的文件中定义域存储？

我觉得我错过了什么

• 我可以实例化一个商店，并让它在安装时实例化一个组件链
• 我可以从文件导入存储，然后在组件中引用它
• 我可以创建一个提供者并将其注入组件
• 我可以使用上下文并以这种方式传递它

但是：

• 为什么我不能在一个文件的顶部创建一个存储区，将所有的逻辑放在其中，然后在它下面创建我想要的所有小的无状态组件，而不必使用一个单独的文件？没有任何方法可以引用商店并将其传递给同一文件中的链？可以说我是老式的，但我喜欢“简单、可读、封装和可维护”

我尝试的所有操作都使render（）方法无法引用存储

---

提前感谢你帮我洗刷我的无知lol。

我认为使用分开的文件存储（甚至组件）会有很多好处，它可以帮助你的代码变得更可重用， 在我看来，这本书更清晰易读， 但是，我想这取决于个人的意见和习惯

实际上，您可以在一个地方编写所有内容，您需要定义所有存储类，并为每个存储类创建一个实例，您将在组件中使用该实例

下面是一个示例，介绍了如何做到这一点：

import React from 'react'
import { observable } from 'mobx'
import { observer } from 'mobx-react'

// Define the store(s)
class TestStore {
    @observable arrayTest = ["Item", "Another item"];

    constructor() {
        // More MobX stuff...
    }
}

// Create an instance for each store, to be used in components
let testStore = new TestStore();


// Define the component(s)
@observer
class Test extends React.Component {
    constructor(props) {
        super(props)
    }


    render() {
        // Using the store instance we defined above
        let { arrayTest } = testStore;

        return <div>
            {arrayTest.map(item => <p>{item}</p>)}
        </div>
    }
}

从“React”导入React
从“mobx”导入{observable}
从“mobx react”导入{observer}
//定义存储
类测试库{
@可观测阵列测试=[“项目”，“另一项”]；
构造函数（）{
//更多MobX的东西。。。
}
}
//为每个存储创建一个实例，以在组件中使用
设testStore=newteststore（）；
//定义组件
@观察者
类测试扩展了React.Component{
建造师（道具）{
超级（道具）
}
render（）{
//使用上面定义的store实例
设{arrayTest}=testStore；
返回
{arrayTest.map（item=>{item}
）}
}
}

如果您想要一个只由一个文件中的组件使用的存储，那么您最好创建一个有状态的组件，其中包含一些可观察的数据

示例（）

@observer
类YourComponent扩展React.Component{
@可观察计数=0；
componentDidMount（）{
this.interval=setInterval（（）=>++this.count，1000）；
}
组件将卸载（）{
clearInterval（这个.interval）；
}
render（）{
返回计数：{this.Count}；
}
}

Ok。我明白了。因此，我们需要确保每个组件的render方法都有一个要调用的本地引用。这很简单。因此，我将尝试使用扩展组件的类和常量，看看会发生什么。（花我几个小时。）；）是的，这就是答案。第0课-将函数向下传递到组件层次结构是不可靠的1-但我们可以将数据作为道具传递，2-在模块中将组件存储实例化为变量。3-参考每个组件中的组件存储4-创建本地函数以访问存储方法。5-将事件绑定到本地函数。6-本地函数访问dom属性，不传递参数，因此我们不会在初始渲染时调用函数。7-Mark hierarch@observ（able/er）没有办法让Mobx离开课堂。我们为Mobx付出的代价。我没有想到。没有，虽然原因是应用程序特定的。谢谢

@observer
class YourComponent extends React.Component {
  @observable count = 0;

  componentDidMount() {
    this.interval = setInterval(() => ++this.count, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return <div> Count: {this.count} </div>;
  }
}