How do I call other ponent function in my current ponent in react native? They are both in different script as well.

Anyone know how to do this in react native?

//ClassOne.js
class ClassOne extends React.Component {

    constructor(props) {
        super(props);
    }

    setValue(){
    }
}

//ClassTwo.js
class ClassTwo extends React.Component {

    constructor(props) {
        super(props);   
    }

    callSetValue(){
        ClassOne.setValue(); HOW???
    }
}

How do I call other ponent function in my current ponent in react native? They are both in different script as well.

Anyone know how to do this in react native?

//ClassOne.js
class ClassOne extends React.Component {

    constructor(props) {
        super(props);
    }

    setValue(){
    }
}

//ClassTwo.js
class ClassTwo extends React.Component {

    constructor(props) {
        super(props);   
    }

    callSetValue(){
        ClassOne.setValue(); HOW???
    }
}

• javascript
• reactjs
• ecmascript-6
• react-native

3 Answers 3

You can pass in ClassOne.setValue as a property to ClassTwo.

//ClassOne.js
class ClassOne extends React.Component {

    constructor(props) {
        super(props);
    }

    setValue(){
        // Do stuff
    }
}

//ClassTwo.js
class ClassTwo extends React.Component {

    constructor(props) {
        super(props);   
    }

    callSetValue(){
        if (this.props.onSetValue) this.props.onSetValue(); // this can be set to any function, including ClassOne's setValue
    }
}

Unless the function you are wanting to call is static you must instantiate whatever class you want inside the scope of where you want to call the function. Say in ClassTwo you want to call a method in ClassOne... Instantiate an instance of ClassOne inside of ClassTwo and then call the function using that object.

Obviously, it is not a remended way in ReactJS, even React-Native. Maybe you wanna follow the object-oriented programming rules but here we have fully functional development in ReactJS. for such your case I prefer to use a helper function and in both of the classes, I import and use the helper function:

// set value helper function

export const setValueHelper = () => {
  // do something
};

Then in the classes:

import { setValueHelper } from 'helpers';

//ClassOne.js
class ClassOne extends React.Component {

    constructor(props) {
        super(props);
    }

    setValue(){
      setValueHelper();
    }
}

import { setValueHelper } from 'helpers';

//ClassTwo.js
class ClassTwo extends React.Component {

    constructor(props) {
        super(props);   
    }

    setValue(){
        setValueHelper();
    }
}