Question

所以我有这个Javascript课程＆＃34;测试＆＃34;。我想在Main react组件中创建它的实例，然后在一些action调用的另一个react组件中使用相同的实例。

class Test
    {
        constructor( arg1, arg2 )
        {
            console.log("initialize with " + arg1 + arg2);
    }

        method1(input) {
            console.log("Using this in Main component")
        }

        method2(input) {
            console.log("I want to use this in another component but with same instance as Main component is using.")
        }

    }
    export default Test;

这是我的主要组件的开头，我正在创建Test

的实例

class Main extends React.Component
{
    constructor(props)
    {
        super(props);
        new Test("arg1", "arg2")
            .then(test => {
                test.method1("input");
            });
    }

现在我想使用上面我在上面做的相同的Test实例，但这次使用method2。

    export default class AccessFromhere extends React.Component {
        constructor()
        {
            super();
            this.access = this.access.bind(this);
        }
        access()
        {
            console.log("How to get same instance of Test from here to use method2 instead.")
  new Test("arg1", "arg2")
                .then(test => {
                    test.method2("input");
                });
        }

我是通过创建Test的新实例来实现的，但感觉这不是一个很好的方法。

Answer 1

从第一个文件导出Test时，请执行以下操作：

export default new Test("arg1", "arg2");

从那时起，无论何时导入Test，您实际上都会获得在导出语句中创建的相同实例。只需从之前创建new对象的地方删除Test语句，而只使用导入的实例。

这是使用ES6导入的Singleton design pattern的简化形式。

从另一个文件访问相同的Javascript类实例

1 个答案: