Javascript ES6 (React) Как использовать метод импортированного класса? - PullRequest
Новая
       45

Javascript ES6 (React) Как использовать метод импортированного класса?

0 голосов
/ 11 сентября 2018

Используя 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;

Ответы [ 3 ]

0 голосов
/ 11 сентября 2018

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

Вам нужно будет сделать 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;
0 голосов
/ 11 сентября 2018

Есть несколько вариантов, в зависимости от того, что вы пытаетесь сделать

1) Если эта функция не связана с экземпляром семени, сделайте его статическим. 

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();
  }
}
0 голосов
/ 11 сентября 2018

Вы можете сделать это с объявлением теста как статического 

class Seed extends React.Component {

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

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

};

если вы хотите позвонить test в компоненте Seed, используйте Seed.test()

...