如何从不同的组件调用函数？

Question

我有一个基本类：

export default class Foo extends Component{
 constructor(props){}
 woop(){
  somethingimportanthappening..
 }
}

在另一个组件中，我像这样导入它：

import Foo from './Foo'
export default class Component2 extends Component{
 constructor(props){}

 randomfunction(){
   Foo.woop() // FAILS
 }
}

如何从另一个组件（Component2）调用函数“woop”？Foo.woop() 不起作用..

Answer 1

在 React 中，组件具有独立的功能，因此在 Foo 组件中您可以定义它，例如

export default class Foo extends Component{
  constructor(props){}
  woop(){
    somethingimportanthappening..
  }
  render() {
    <div>Class Foo</div>
  }
}

当你想使用 Foo 组件时，你只需导入并使用

<Foo />

如果你想在 Foo 组件中使用一个函数，你可以定义一个对 Foo 的引用

<Foo ref="foo" />

然后使用它

import Foo from './Foo'
export default class Component2 extends Component{
  constructor(props){}

  randomfunction(){
    this.refs.foo.woop();
  }

  render() {
    return <Foo ref="foo" />
  }
}