Javascript ES6 (React) 如何使用导入类的方法?

Question

使用 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;

Answer 1

选项很少，具体取决于您要执行的操作

1( 如果此函数与 Seed 的实例无关，则将其设为静态。

class Seed extends React.Component {
static test() {
console.log('seed test');
}
// ...etc
}

然后你可以按照你已经调用它的方式来称呼它。

2(如果需要将其绑定到种子的特定实例，则可以新建一个种子，然后调用它。例如：

const mySeed = new Seed();
mySeed.test();

鉴于 Seed 是一个 react 组件，这很可能不是你想要做的，因为你应该让 react 做组件的实例化，然后通过 prop 与它交互

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(使用道具，不要直接调用。具体如何执行此操作取决于您尝试执行的操作，但假设您只想在某些条件为真时才调用该方法。然后你可以将一个道具传递给种子，种子调用方法本身。

// in App:
render() {
render <Seed shouldDoStuff={true} />
}
// In seed:
constructor(props) {
super(props);
if (props.shouldDoStuff) {
this.test();
}
}

Answer 2

你可以像这样将测试声明为静态

class Seed extends React.Component {
static test() {
console.log('seed test');
}
constructor(props) {
super(props);
console.log('seed1');
}
};

如果要在种子组件中调用test，请使用Seed.test()

Answer 3

你不能像这样访问类的方法，因为它不是静态的。

您需要使用<Seed />渲染App并获得该组件的引用。

// App.js
import React from 'react';
import Seed from './Seed';
class App extends React.Component {
constructor(props) {
super(props);
console.log('start1');
this.seedRef = React.createRef();
}
componentDidMount() {
// seedRef is the Seed instance
this.seedRef.current.test();
}
render() {
return(<Seed ref={this.seedRef} />);
}
}
export default App;