Question

使用javascript ES6（React），我无法调用导入类的简单方法。

此代码有什么问题？

TypeError： WEBPACK_IMPORTED_MODULE_1__种子。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

您可以像这样将test声明为static来完成

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。

您需要使用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）使用道具，不要直接叫它。确切的执行方法取决于您要执行的操作，但是假设您只想在某些条件为真时才调用该方法。然后，您可以将一个prop传递给Seed，种子将调用方法本身。

// in App:

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

// In seed:

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

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

3 个答案: