Correct façon de partager des fonctions entre les composants de Réagir

Voici quelques exemples sur la façon dont vous pouvez réutiliser une fonction (FetchUtil.handleError) dans une Réagir composant (App).

Solution 1: Utilisation de CommonJS module syntaxe

module.exports = {
  handleError: function(response) {
    if (!response.ok) throw new Error(response.statusText);
    return response;
  },
};

Solution 2: Utilisation de "createClass" React (v16)

util/FetchUtil.js

const createReactClass = require('create-react-class');

const FetchUtil = createReactClass({
  statics: {
    handleError: function(response) {
      if (!response.ok) throw new Error(response.statusText);
      return response;
    },
  },
  render() {
  },
});

export default FetchUtil;

Remarque: Si vous utilisez Réagir v15.4 (ou ci-dessous), vous devez importer createClass comme suit:

import React from 'react';
const FetchUtil = React.createClass({});

Source: https://reactjs.org/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactcreateclass

Composant (qui réutilise FetchUtil)

composants/App.jsx

import Categories from './Categories.jsx';
import FetchUtil from '../utils/FetchUtil';
import Grid from 'material-ui/Grid';
import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {categories: []};
  }

  componentWillMount() {
    window
      .fetch('/rest/service/v1/categories')
      .then(FetchUtil.handleError)
      .then(response => response.json())
      .then(categories => this.setState({...this.state, categories}));
  }

  render() {
    return (
      <Grid container={true} spacing={16}>
        <Grid item={true} xs={12}>
          <Categories categories={this.state.categories} />
        </Grid>
      </Grid>
    );
  }
}

export default App;

Utils.js avec la dernière version de Javascript SE6 syntaxe

Créer le Utils.js fichier comme ceci avec de multiples fonctions, etc

import React, {Component} from 'react';

const someCommonValues = ['common', 'values'];

export const doSomethingWithInput = (theInput) => {
    //Do something with the input
    return theInput;
};

export const justAnAlert = () => {
    alert('hello');
};

Puis dans votre composants que vous souhaitez utiliser le menu util fonctions, importation de fonctions spécifiques qui sont nécessaires. Vous n'avez pas à importer tout

import {doSomethingWithInput, justAnAlert} from './path/to/utils.js/file'

Puis l'utilisation de ces fonctions au sein de la composante comme ceci:

justAnAlert();
<p>{doSomethingWithInput('hello')}</p>

Cela dépend du nombre de composants à la logique se rapportent les uns aux autres.

Si la logique est relativement liées (ils ne sont utilisés ensemble dans la même application), vous devez partager entre les composants. Mais si votre logique est lointainement liée à (c'est à dire, les mathématiques util, mise en forme de texte util), alors vous devriez faire et l'importation util fonctions de classe.

Relativement composantes connexes peut être créé avec rappel des références, comme cela, en ./components/App.js...

<SomeItem
    ref={(instance) => {this.childA = instance}}
/>

<SomeOtherItem
    ref={(instance) => {this.childB = instance}}
/>

Et puis vous pouvez utilisation fonctions partagées entre eux comme ça...

this.childA.investigateComponent(this.childB);  //call childA function with childB as arg
this.childB.makeNotesOnComponent(this.childA);  //call childB function with childA as arg

Util-composants de type peut être créé comme cela, en ./utils/time.js...

export const getTimeDifference = function (start, end) {
    //return difference between start and end
}

Et ils peuvent alors être utilisé comme cela, en ./components/App.js...

import React from 'react';
import {getTimeDifference} from './utils/time.js';

export default class App extends React.Component {
    someFunction() {
        console.log(getTimeDifference("19:00:00", "20:00:00"));
    }
}

Si vous voulez manipuler l'état dans des fonctions d'assistance de suivre ce:

1. Créer un Helpers.js fichier:

   export function myFunc(){
return this.state.name; //define it according to your needs
}

2. Importation fonction d'assistance dans votre fichier de composant:

   import {myFunc} from 'path-to/Helpers.js'

3. Dans votre constructeur ajouter que la fonction d'assistance à la classe

   constructor(){
this.myFunc = myFunc.bind(this)
}

4. Dans votre fonction rendu l'utiliser:

   render(){
<div>{this.myFunc()}</div>
}