ReactJs Mondial Des Fonctions D'Assistance

Question:
J'ai beaucoup de petites fonctions d'assistance qui n'a pas nécessairement besoin de vivre dans un composant(ou peut-être qu'ils peuvent, mais ils feront de ce composant gonflé avec beaucoup de code).De mon côté paresseux veut juste laisser ces tout simplement pas une sorte de fonctions globales que les composants peuvent appeler.Je veux vraiment faire de bonnes ReactJs code.

Question:
Quelles sont les meilleures pratiques en termes de fonctions d'assistance global dans Reactjs? Dois-je les forcer dans une sorte de composant ou tout 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 () {

        }

    });
InformationsquelleAutor Nick Pineda | 2015-05-13
  1. 16

    Vous pouvez exporter plusieurs fonctions à partir d'un fichier, pas de Réagir 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'
    • J'ai eu à utiliser./Helpers.js' mais cela m'a aidé.
    • Ah oui, vous avez raison. Mon IDE corrige toujours que pour moi, que je l'oublie toujours d'ajouter 😀
    • l'appeler par onClick={(e) => {exportTableToExcel("ParkSorguTable", "ParkSorgu")}} causes TypeError: Object(...) is not a function l'importation comme import exportTableToExcel from '@/util/helper.js';
    • J'ai besoin d'importer à l'intérieur des accolades! Grâce import {exportTableToExcel} from '@/util/helper.js';
    • Si vous avez seulement 1 fonction, vous pouvez également le faire: export default function myFunction () { /* ... */ } et puis: import myFunction from './myFunction'.
    InformationsquelleAutor Michiel
  2. 9

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

    Ne pas utiliser de Mixin, ils seront probablement obsolète dans les prochaines versions de Réagir comme il n'y a pas de méthode standard pour déclarer mixin à Réagir avec de l'ES6 syntaxe et ils préfèrent attendre pour ES7 qui sera probablement normaliser mixin. Et il n'y a pas de point de couplage votre code réutilisable à Réagir, sauf si elle utilise Réagir cycle de vie de ses méthodes.

    • Pourriez-vous poster un petit exemple, s'il vous plaît? Voulez-vous toujours de quitter les fonctions de la portée mondiale, mais exigent d'eux par l'intermédiaire d'un module?
    • Je ne comprends pas ce que vous demandez @Simon. Il suffit de mettre votre helper code dans un autre fichier: export function help(someArg) { return "something" } et exigent que, si vous en avez besoin.
    InformationsquelleAutor Sebastien Lorber
  3. 1

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

    Échantillon pour mixin: 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'));
    • un exemple d'utilisation de l'OP du code plutôt que de simplement les liens qui en feraient un bien meilleur réponse.
    InformationsquelleAutor wilson
  4. 1

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

    var YourComponent = React.createClass({

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

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

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

    Toutes testées, mais c'est l'idée...

    • oui j'étais sur le point de mettre à jour ma question, découvrez la mise à jour dans un sec
    InformationsquelleAutor Zinc