Javascript ES6（React）如何使用导入类的方法？

Question

Using javascript ES6 (React), I'm not able to call a simple method of an imported class.

What's wrong with this code?

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;

and

// 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

You can do that with declare test as static like this

class Seed extends React.Component {

  static test() {
    console.log('seed test');
  }

  constructor(props) {
    super(props);
    console.log('seed1');
  }

};

if you want call test in Seed component use Seed.test()

Answer 2

You cannot access a class' method like that since it's not static .

You would need to have App render with a <Seed /> and get a ref to that component.

// 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;

Answer 3

There are few options, depending on what you're trying to do

1) If this function is unrelated to an instance of a Seed, then make it static.

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

Then you can call it the way you're already calling it.

2) If it needs to be tied to a specific instance of a seed, you could new one up and then call it. For example:

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

Given that Seed is a react component this is very likely not what you want to do, since you should let react do the instantiating of components and then interact with it through props

3) Use refs to let react give you a reference to the component. I'll assume you're using react 16 or higher and thus have access to React.createRef

constructor(props) {
  super(props);

  this.seedRef = React.createRef();
}

componentDidMount() {
  this.seedRef.current.test();
}

render() {
  return <Seed ref={this.seedRef}/>
}

This is better, but its still questionable that you would want to interact with a component this directly.

4) Use props, don't call it directly. Exactly how to do this depends what you're trying to do, but suppose you want to only call the method if some condition is true. Then you could pass a prop in to the Seed, and the seed calls the method itself.

// in App:

render() {
  render <Seed shouldDoStuff={true} />
}

// In seed:

constructor(props) {
  super(props);
  if (props.shouldDoStuff) {
    this.test();
  }
}