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

我如何调用该功能＆＃34; woop＆＃34;来自其他组件（Component2）？ 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" />
  }
}

Answer 2

由于woop不是static函数，您不能Foo.woop()

您应该按如下方式实例化Foo实例：

import Foo from './Foo'

export default class Component2 extends Component{
    private fooInstance: Foo;

    constructor(props){
      this.fooInstance = new Foo(props);
    }

    useFoo(){
      this.fooInstance.woop();
    }
}

如果有什么不清楚，请告诉我。）

Answer 3

创建一个类的实例来调用函数对我来说似乎不对。我不确定，但它就像在Android中的另一个Activity中调用来自不同Activity的函数：You can't and mustn't do that.

Imo，调用不同类的函数以将函数回调作为props传递的正确方法（如果存在父母关系）。如果没有，则使用react-native-simple-events触发Events非常简单。

或者，您可以使用Redux使您的应用更加强大。这可能会改变并改善您的整体应用逻辑。

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

3 个答案: