Javascript ES6（React）如何使用導入類的方法？

Question

使用javascript ES6（React），我無法調用導入類的簡單方法。

此代碼有什么問題？

TypeError： 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

你可以這樣聲明測試為靜態

class Seed extends React.Component {

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

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

};

如果要在Seed組件中進行調用test ，請使用Seed.test()

Answer 2

您不能像這樣訪問類的方法，因為它不是static 。

您需要使用<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;

Answer 3

選擇很少，具體取決於您要執行的操作

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）使用道具，不要直接叫它。 確切的執行方法取決於您要執行的操作，但是假設您只想在某些條件為真時才調用該方法。 然后，您可以將一個prop傳遞給Seed，種子將調用方法本身。

// in App:

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

// In seed:

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