如何从javascript中的其他类/组件调用方法？

Question

我仍然是前端的新秀。我有2个NON RELATED（没有父/子关系）类：

search.js
Class Search{
   method,
   state
}

view.js
Class view{
     content
}

我在尝试着：

• 从view.js调用search.js方法。
• 从view.js更改search.js的状态值

附加信息：

• 我已经尝试过使用helper functions。这不是理想的解决方案。
• 我使用的是React，它是React的轻量级版本。

谢谢！

码：

export default class Search extends Component {
    constructor() {
        this.state = {
            input: ""
        };
    }

    search(input) {
        this.setState({ input: input });
    }
}

Answer 1

如果类是不相关的，那么只有三种方法可以在类之外使用类的方法（或者，实际上，在它内部）：

1. 如果它是static方法，请直接调用它： Search.theStaticMethod()
2. 如果它是原型或实例方法，通常的做法是创建一个实例，然后在该实例上调用该方法：

   const s = new Search(/*...*/);
   s.prototypeOrInstanceMethod();

3. 如果它是原型方法，您可以在不创建实例的情况下调用它，但这样做极有可能是错误的：

   // ALMOST CERTAINLY NOT THE RIGHT THING
   Search.prototype.prototypeMethod();

   在将对象应用于对象的位置有一个变体，即使该对象不是通过new Search创建的：

   // ALMOST CERTAINLY NOT THE RIGHT THING
   const obj = {};
   Search.prototype.prototypeMethod.call(obj);

   该方法将对象作为this，并且可能会或可能不会正常工作，具体取决于它的编写方式。

Answer 2

你需要一个已经回答过的类实例。

const myInstance = new Search();

您可以导出此实例而不是导出类。

export {myInstance};

在view.js中，您需要导入它

import {myInstance} from './relative-path';

然后你打电话给方法

myInstance.search('someInput');

Answer 3

采取比香草js更多的反应......可能已经回答了here甚至（原始）here

我有2个NON RELATED（没有父/子关系）类：

两者都在同一个屏幕/视图/应用程序/组件树中？然后间接但仍然相关。

我在尝试着：

• 从view.js调用search.js方法。
• 从view.js更改search.js的状态值

有几种方法可以管理常见状态（值或方法）：

• 在共同的父母（lifting state up），甚至顶级<App />组成部分
• 使用refs
• 使用上下文api
• 终极版
• 阿波罗客户

使用Preact - 然后搜索一些微小的全局状态管理，f.e。 statext或unstated