Reactのコンポーネント間で関数を共有する正しい方法

Question

私は同じことをすべて行う必要がある複数のコンポーネントを持っています。 （子コンポーネントをマップし、それぞれに何かを実行する単純な関数）。現時点では、各コンポーネントでこのメソッドを定義しています。しかし、私はそれを一度定義したいだけです。

Iは、トップレベルのコンポーネントでそれを定義し、小道具としてそれを渡すことができます。しかし、それはまったく正しいとは思わない。これは、支柱よりもライブラリ関数です。 （私にはそう思われる）。

これを行うための正しい方法は何ですか？

Answer 1

あなたがbrowserifyのようなものを使用した場合、あなたは、いくつかのユーティリティ関数をエクスポートする外部ファイルすなわちのutil.jsを持つことができます。

var doSomething = function(num) { 
return num + 1; 
} 

exports.doSomething = doSomething; 

、必要に応じて次に

var doSomething = require('./util.js').doSomething; 

Answer 2

が、その場合には、なぜ別の静的なユーティリティモジュールに入れていない、効用関数のように聞こえる？それを必要としますか

そうでない場合は、ES7の静的メソッドを利用することができるバベルのようなtranspiler使用：

class MyComponent extends React.Component { 
    static someMethod() { ... 

さもないと、あなたがReact.createClassを使用している場合はstaticsオブジェクトを使用することができます

var MyComponent = React.createClass({ 
    statics: { 
    customMethod: function(foo) { 
     return foo === 'bar'; 
    } 
    } 

をしかし、私はこれらのオプションについてはアドバイスしていませんが、ユーティリティメソッドにコンポーネントを含めることは意味がありません。

また、あなたはそれがしっかりとカップルそれら意志小道具として、すべてのコンポーネントを介し法を伝承し、より多くの痛みを伴うリファクタリング作るべきではありません。私は普通の古いユーティリティモジュールに助言する。

他のオプションは、クラスを拡張するためにミックスインを使用することですが、私はあなたがES6 +でそれを行うことができないとして（と私は、この場合の利点が表示されていない）ことをお勧めしません。

Answer 3

このためにMixinを使用しないでください。彼らは好意から下落しているが、ここでhttps://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750

が

Answer 4

便利かもしれません参照https://facebook.github.io/react/docs/reusable-components.html

を参照してください、あなたが反応コンポーネント（App）で機能（FetchUtil.handleError）を再利用することができます方法についていくつかの例があります。

解決策1：

​​

CommonJSモジュール構文を用いて溶液2： "createClass" を使用して（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; 

注：もしあなたはReact v15を使用しています。

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

出典：：（FetchUtilを再利用）https://reactjs.org/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactcreateclass

コンポーネント

コンポーネント/ 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;