function - example - Funciones de ayuda global de ReactJs

react native map array

Question

Problema: Tengo muchas funciones pequeñas de ayuda que no necesariamente tienen que vivir en un componente (o tal vez puedan, pero harán que ese componente esté inflado con una gran cantidad de código). Mi lado perezoso solo quiere dejar que todo eso solo sé una especie de funciones globales a las que los componentes puedan llamar. Realmente quiero hacer un buen código ReactJs.

Pregunta: ¿Cuáles son las mejores prácticas en términos de funciones de ayuda globales en Reactjs? ¿Debo forzarlos en algún tipo de componente o simplemente empujarlos en los otros componentes?

Ejemplo básico:

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 () {

        }

    });

Answer 1

Puede exportar múltiples funciones desde un archivo, sin necesidad de Reacción per se:

Ayudantes.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;
}

A continuación, puede importar las funciones que necesita:

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

Answer 2

Puede usar una herramienta de agrupación de módulos como Webpack o Browserify para eso. Ponga sus funciones reutilizables en un módulo CommonJS.

No use Mixins , probablemente quedarán obsoletos en las próximas versiones de React, ya que no hay una forma estándar de declarar mixins en la sintaxis de React con ES6 y prefieren esperar a ES7 que probablemente estandarice los mixins. Y no tiene sentido unir su código reutilizable a React a menos que use los métodos del ciclo de vida de React.

Answer 3

Puedes usar modulejs. o puede usar mixins ( https://facebook.github.io/react/docs/reusable-components.html#mixins )

Muestra para 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''));

Answer 4

Solo otra opción, si no desea dividirse en un módulo separado, puede crear un método privado en su componente principal como el que se muestra a continuación y utilizarlo libremente dentro de este componente o pasar a los componentes secundarios a través de accesorios.

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
    .....

Todo sin probar, pero esa es la idea ...