web-dev-qa-db-ja.com

ReactJsグローバルヘルパー関数

問題：必ずしもコンポーネントに住む必要のない小さなヘルパー関数がたくさんあります（または、できるかもしれませんが、多くのコードでそのコンポーネントが肥大化するでしょう）。コンポーネントが呼び出すことができるグローバル関数のようなものになります。私は本当に良いReactJsコードを作りたいです。

質問：Reactjsのグローバルヘルパー関数に関するベストプラクティスは何ですか？それらを何らかの種類のコンポーネントに強制するか、他のコンポーネントに押し込むだけですか？

基本的な例：

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

ファイルから複数の関数をエクスポートできます。noReactそれ自体は必要ありません：

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

その後、必要な機能をインポートできます。

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

WebpackまたはBrowserifyのようなモジュールバンドルツールを使用できます。再利用可能な関数をCommonJSモジュールに配置します。

Mixinsを使用しないでください、ES6構文ではReactでミックスインを宣言する標準的な方法がないため、Reactの次のバージョンでは非推奨になります。おそらくミックスインを標準化するES7を待ちます。また、Reactライフサイクルのメソッドを使用しない限り、再利用可能なコードをReactに結合する意味はありません。

9
Sebastien Lorber

Modulejsを使用できます。または、ミックスインを使用できます（ https://facebook.github.io/react/docs/reusable-components.html#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

別のオプションとして、別のモジュールに分割したくない場合は、以下のように親コンポーネントでプライベートメソッドを作成し、このコンポーネント内で自由に使用するか、propsを介して子コンポーネントに渡すことができます。

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

すべてテストされていませんが、それがアイデアです...

0
Zinc