Javascript ES6 (React) 如何使用导入的方法class？

Question

使用 javascript ES6 (React)，我无法调用导入的简单方法 class。

这段代码有什么问题？

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;

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

您不能像那样访问 class' 方法，因为它不是 static。

您需要 App 使用 <Seed /> 进行渲染，并为该组件获取 ref。

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

// in App:

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

// In seed:

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

Javascript ES6 (React) 如何使用导入的方法class？

Javascript ES6 (React) How to use a method of an imported class?

javascript

reactjs

ecmascript-6

javascript-import