使用 javascript ES6 (React),我无法调用导入类的简单方法。
这段代码有什么问题?
TypeError: WEBPACK_IMPORTED_MODULE_1__Seed.a.test is not a function
// 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) 如果需要将其绑定(bind)到种子的特定实例,您可以新建一个实例,然后调用它。例如:
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,不要直接调用。具体如何执行此操作取决于您想要执行的操作,但假设您只想在某些条件为真时调用该方法。然后你可以将一个 prop 传递给 Seed,然后 Seed 调用该方法本身。
// in App:
render() {
render <Seed shouldDoStuff={true} />
}
// In seed:
constructor(props) {
super(props);
if (props.shouldDoStuff) {
this.test();
}
}
关于Javascript ES6 (React) 如何使用导入类的方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52268297/