javascript - Javascript ES6(React)如何使用导入类的方法?
问题描述
使用 javascript ES6 (React),我无法调用导入类的简单方法。
这段代码有什么问题?
类型错误:WEBPACK_IMPORTED_MODULE_1__Seed .a.test 不是函数
// App.js
import React from 'react';
import Seed from './Seed';
class App extends React.Component {
constructor(props) {
super(props);
console.log('start1');
Seed.test();
}
render() {
return("ei");
}
}
export default App;
和
// Seed.js
import React from 'react';
class Seed extends React.Component {
constructor(props) {
super(props);
console.log('seed1');
}
test() {
console.log('seed test');
}
};
export default Seed;
解决方案
选项很少,具体取决于您要执行的操作
1) 如果此函数与 Seed 的实例无关,则将其设为静态。
class Seed extends React.Component {
static test() {
console.log('seed test');
}
// ...etc
}
然后你可以用你已经调用它的方式来调用它。
2)如果它需要绑定到种子的特定实例,您可以新建一个然后调用它。例如:
const mySeed = new Seed();
mySeed.test();
鉴于 Seed 是一个 react 组件,这很可能不是您想要做的,因为您应该让 react 进行组件的实例化,然后通过 props 与之交互
3)使用 refs 让 react 给你一个组件的引用。我假设您使用的是 react 16 或更高版本,因此可以访问 React.createRef
constructor(props) {
super(props);
this.seedRef = React.createRef();
}
componentDidMount() {
this.seedRef.current.test();
}
render() {
return <Seed ref={this.seedRef}/>
}
这更好,但是您是否希望直接与组件交互仍然值得怀疑。
4)使用props,不要直接调用。究竟如何执行此操作取决于您要执行的操作,但假设您只想在某些条件为真时调用该方法。然后你可以将一个道具传递给种子,种子会调用方法本身。
// in App:
render() {
render <Seed shouldDoStuff={true} />
}
// In seed:
constructor(props) {
super(props);
if (props.shouldDoStuff) {
this.test();
}
}
推荐阅读
- delphi - 在 RTL 系统上强制英语语言任务对话为 LTR
- gradle - 限制梯度传递深度分辨率
- reactjs - 带有 React 和 WebSockets 的仪表板 - 如何构建应用程序
- asp.net-core - 如何使用 SignalR 在 ASP.Net Core 中实现屏幕共享和查看?
- regex - Clickhouse 查询使用正则表达式
- java - 使用复合键批量插入实体
- express-gateway - Express Gateway 向端点添加范围
- java - 从异常消息中提取 statusCode 和 message
- javascript - 赛普拉斯如何检查 div 中的背景是否发生变化
- python - 如何在 django 中自定义帖子的响应消息?