javascript - How to call function from different Component? - Stack Overflow

admin管理员组

文章数量:1293335

I have a basic class:

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

in the other ponent I import it like this:

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

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

How can I call the function "woop" from the other ponent (Component2)? Foo.woop() isn't working ..

I have a basic class:

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

in the other ponent I import it like this:

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

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

How can I call the function "woop" from the other ponent (Component2)? Foo.woop() isn't working ..

• javascript
• react-native

Share Improve this question Follow edited Sep 13, 2016 at 13:10 user57508 asked Sep 13, 2016 at 12:29 dv3dv3 4,57966 gold badges2929 silver badges5353 bronze badges 2

• OK, blame me for being old fashioned, if you will, but I've not played around with new ES6 stuff, so I'm not totally clear what this does. Yet, I think you're exporting a class Foo and woop() is an instance method. Hence, shouldn't you do foo = new Foo(); foo.woop()? – VLAZ Commented Sep 13, 2016 at 12:31
• 1 Please see "Should questions include “tags” in their titles?", where the consensus is "no, they should not"! – user57508 Commented Sep 13, 2016 at 13:10

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

In React a ponent have an independent function, so in Foo ponent you define it, something like

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

and when you want to use Foo ponent, you just import and use

<Foo />

and if you want to use a function in Foo ponent, you can define a reference to Foo

<Foo ref="foo" />

then use it by

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

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

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

Since woop is not a static function you cannot Foo.woop()

You should instantiate a Foo instance as follows:

import Foo from './Foo'

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

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

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

Let me know if something is unclear :)

Creating an instance of a class to call a function seems wrong to me. I'm not sure but its like calling a function from different Activity inside another Activity in Android: You can't and mustn't do that.

Imo, the proper way to call a function of a different class to pass the function callback as props (if there is a parental relation). If there isn't any, triggering Events using react-native-simple-events is fairly simple.

Alternatively, you can use Redux which makes your app more robust. This may change and improve your overall app logic.

本文标签： javascriptHow to call function from different ComponentStack Overflow