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

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" />
  }
}