web-dev-qa-db-fra.com

Fonctions d'aide globale de ReactJs

Problème: j'ai beaucoup de petites fonctions d'aide qui n'ont pas nécessairement besoin de vivre dans un composant (ou peut-être qu'elles le peuvent mais elles feront gonfler ce composant avec beaucoup de code). Mon côté paresseux veut juste laisser tout cela être juste une sorte de fonctions globales que les composants peuvent appeler. Je veux vraiment faire du bon code ReactJs.

Question: Quelles sont les meilleures pratiques en termes de fonctions d'assistance globales dans Reactjs? Dois-je les forcer dans une sorte de composant ou simplement les pousser dans les autres composants?

Exemple de base:

function helperfunction1(a, b) {
    //does some work
    return someValue;
}

function helperfunction2(c, d) {
    //does some work
    return someOtherValue;
}

function helperfunction3(e, f) {
    //does some work
    return anotherValue;
}

function helperfunction4(a, c) {
    //does some work
    return someValueAgain;
}


var SomeComponent =
    React.createClass({

        //Has bunch of methods

        //Uses some helper functions

        render: function () {

        }

    });

var SomeOtherComponent =
    React.createClass({

        //Has bunch of methods

        //Uses some helper functions

        render: function () {

        }

    });
functioncomponentsreactjsglobal-methods
23
Nick Pineda

Vous pouvez exporter plusieurs fonctions à partir d'un fichier, non React nécessaire en soi:

Helpers.js:

export function plus(a, b) {
  return a + b;
}

export function minus(a, b) {
  return a - b;
}

export function multiply(a, b) {
  return a * b;
}

export function divide(a, b) {
  return a / b;
}

Vous pouvez ensuite importer les fonctions dont vous avez besoin:

import { multiply, divide } from './Helpers'
10
Michiel

Vous pouvez utiliser un outil de regroupement de modules comme Webpack ou Browserify pour cela. Mettez vos fonctions réutilisables dans un module CommonJS.

Ne pas utiliser Mixins, ils seront probablement obsolètes dans les prochaines versions de React car il n'y a pas de méthode standard pour déclarer les mixins dans React avec la syntaxe ES6 et ils préfèrent attendre ES7 qui normalisera probablement les mixins. Et il est inutile de coupler votre code réutilisable à React sauf s'il utilise React méthodes de cycle de vie) .

9
Sebastien Lorber

Vous pouvez utiliser modulejs. ou vous pouvez utiliser des mixins ( https://facebook.github.io/react/docs/reusable-components.html#mixins )

Exemple pour les mixins: https://jsfiddle.net/q88yzups/1/

var MyCommonFunc = {
    helperFunction1: function() {
       alert('herper function1');
    },
    doSomething: function(){
        alert('dosomething');
    }
}

var Hello = React.createClass({
    mixins: [MyCommonFunc],
    render: function() {
        this.doSomething();
        return <div onClick={this.helperFunction1}>Hello {this.props.name} </div>;
    }
});

React.render(<Hello name="World" />, document.getElementById('container'));
1
wilson

Juste une autre option, si vous ne voulez pas vous diviser en un module séparé, vous pouvez créer une méthode privée dans votre composant parent comme ci-dessous et l'utiliser librement dans ce composant ou passer aux composants enfants via des accessoires.

var YourComponent = React.createClass({

    globalConfig: function() {
        return {
            testFunc: function () {
                console.log('testing...');
            },
        };
    }(),

    ......
    render: function() {
        this.globalConfig.testFunc(); // use directly

        <ChildComponent globalConfig={this.globalConfig.testFunc} /> // pass to child
    .....

Tout n'a pas été testé, mais c'est l'idée ...

0
Zinc