如何调用 javascript 中另一个 class/component 的方法?
How can I call a method from an other class/component in javascript?
我还是前端菜鸟。我有 2 NON RELATED(没有 parent/child 关系)类:
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 });
}
}
如果 class 是不相关的,那么只有三种方法可以在 class 之外(或者,实际上,在其中)使用 class 的方法:
如果是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
,并且可能会或可能不会正确工作,具体取决于它的编写方式。
您需要一个 class 的实例,如前所述。
const myInstance = new Search();
您可以导出此实例而不是导出 class。
export {myInstance};
在view.js中你需要导入它
import {myInstance} from './relative-path';
然后调用方法
myInstance.search('someInput');
比 vanilla js 反应 更多 ...可能已经回答了 or even (primitively)
I have 2 NON RELATED (no parent/child relation) classes:
都在同一棵 screen/view/app/component 树中?然后间接但仍然相关。
I am trying to:
- call a search.js method from view.js.
- change state value of search.js from view.js
有几种方法可以管理公共状态(值或方法):
- 公共父级 (lifting state up) 中的状态,甚至顶部
<App />
组件
- 使用参考文献
- 使用上下文 api
- redux
- 阿波罗客户端
我还是前端菜鸟。我有 2 NON RELATED(没有 parent/child 关系)类:
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 });
}
}
如果 class 是不相关的,那么只有三种方法可以在 class 之外(或者,实际上,在其中)使用 class 的方法:
如果是
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
,并且可能会或可能不会正确工作,具体取决于它的编写方式。
您需要一个 class 的实例,如前所述。
const myInstance = new Search();
您可以导出此实例而不是导出 class。
export {myInstance};
在view.js中你需要导入它
import {myInstance} from './relative-path';
然后调用方法
myInstance.search('someInput');
比 vanilla js 反应 更多 ...可能已经回答了
I have 2 NON RELATED (no parent/child relation) classes:
都在同一棵 screen/view/app/component 树中?然后间接但仍然相关。
I am trying to:
- call a search.js method from view.js.
- change state value of search.js from view.js
有几种方法可以管理公共状态(值或方法):
- 公共父级 (lifting state up) 中的状态,甚至顶部
<App />
组件 - 使用参考文献
- 使用上下文 api
- redux
- 阿波罗客户端