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 является компонентом реагирования, это, скорее всего, не то, что вы хотите сделать, так как вы должны позволить реакции делать инстанцирование компонентов, а затем взаимодействовать с ним через реквизиты.

3) Используйте ссылки, чтобы позволить реакции дать вам ссылку на компонент. Я предполагаю, что вы используете реакцию 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 Seed.test()

Answer 3

Вы не можете получить доступ к такому методу класса, так как он не является статическим.

Вы должны были бы иметь App сделать с <Seed /> и получить ссылку на этот компонент.

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