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

【问题标题】：How can I call a method from an other class/component in javascript?如何从 javascript 中的其他类/组件调用方法？
【发布时间】：2019-09-16 15:35:03
【问题描述】：

我还是前端的菜鸟。我有 2 个 NON RELATED（无父/子关系）类：

search.js
Class Search{
   method,
   state
}

view.js
Class view{
     content
}

我正在尝试：

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

其他信息：

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

谢谢！

代码：

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

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

【问题讨论】：

标签： javascript reactjs class components preact

【解决方案1】：

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

如果是static方法，直接调用：
```
Search.theStaticMethod()
```
如果是原型或实例方法，通常的做法是创建一个实例，然后在该实例上调用该方法：
```
const s = new Search(/*...*/);
s.prototypeOrInstanceMethod();
```
如果它是原型方法，您可以在不创建实例的情况下调用它，但这样做极有可能不正确：
```
// 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，并且可能会或可能不会正常工作，具体取决于它的编写方式。

【讨论】：

非常感谢！方法 #2 是要走的路。

【解决方案2】：

您需要一个已回答的类实例。

const myInstance = new Search();

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

export {myInstance};

在 view.js 中你需要导入它

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

然后你调用方法

myInstance.search('someInput');

【讨论】：

【解决方案3】：

采取更多反应比香草js ...可能已经回答here甚至（最初）here

我有 2 个非相关（无父/子关系）类：

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

我正在尝试：

从 view.js 调用 search.js 方法。

从 view.js 更改 search.js 的状态值

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

公共父级 (lifting state up) 中的状态，甚至是顶部 <App /> 组件中的状态
使用引用
使用上下文 api
redux
阿波罗客户端

使用 Preact - 然后搜索一些微小的全局状态管理，例如statext 或 unstated

【讨论】：