Pouvez-vous ajouter une fonction externe en tant que méthode dans une classe de composant React?

Question

Dans le cas suivant React composante:

class MyComponent extends Component { 
    sayGreeting =() => { 
    return this.props.greeting; 
    } 

    render() { 
    return (
     <div>{this.sayGreeting()}</div> 
    ); 
    } 
} 

greeting est passé par des accessoires et est juste un message de chaîne. Étant donné que sayGreeting() peut être utilisé dans plusieurs composants, avec exactement la même définition, serait-il possible de l'extraire dans un fichier (voir le code suivant) et de l'inclure dans chaque composant si nécessaire. C'est comme le module include (ou mixin?) Dans les langages de programmation comme Ruby.

export const sayGreeting =() => { 
    return this.props.greeting; 
}; 

j'ai pu le faire en important sayGreeting à partir de ce fichier et le réglage du prototype de MyComponent en tant que tel:

import { sayGreeting } from './someFile'; 
// ... 
MyComponent.prototype.sayGreeting = sayGreeting; 

Mais la question est le mot-clé « ce », si les accessoires ne seront pas défini. J'ai essayé de lier dans le constructeur en utilisant this.sayGreeting = this.sayGreeting.bind(this), mais cela n'a pas fonctionné.

Answer 1

Transmettez la fonction this à la fonction.

export const sayGreeting = ({props}) => { 
    return props.greeting; 
}; 

ensuite à utiliser après l'importation: sayGreeting(this)

Answer 2

Vous pouvez utiliser un higher-order component:

const myHOC = (composedComponent) => { 
    return class extends React.Component { 
    sayGreeting =() => { 
     return this.props.greeting; 
    } 

    render() { 
     return <ComposedComponent sayGreeting={ this.sayGreeting } />; 
    } 
    }; 
}; 

class MyComponent extends React.Component { 
    render() { 
     return <div>{this.props.sayGreeting()}</div> 
    } 
} 

export default MyHOC(MyComponent);