react 共通で使いたい関数

Question

<App>
 <A>
   <B></B>
 </A>
</App>

上記のようなコンポーネント構造があった場合、
Aの
var A = React.createClass({});
で定義した関数（メソッド）を
AppでもBでも使いたいのですが、
その場合どのように書いたり、ファイルを管理したりしたら
良いのでしょうか？
現状わからず、同じ関数をAにもBにも書いている状態です。

Answer 1

JSでは関数とメソッドは明確に区別されています。

• 関数: 単体で存在する
• メソッド: インスタンスに紐付く

---

現状わからず、同じ関数をAにもBにも書いている状態です。

今回のケースはインスタンスに依存していないようですね。
この場合のケースならば関数が適切でしょう。

Reactを実用しているならBrowserifyやWebpackを利用していますか？
そうであれば、ES6モジュールによる外部ファイルの読み込み機能を使いましょう。
ただ、ES6モジュールの考え方は少々難解なので、もし初耳ならぐぐったりしてES6やES6モジュールやその使い方を調査してみてください。

また、あまり推奨ではないですがグローバル変数領域で関数として宣言する方法もあります。
JSでは関数や変数を利用した時に、そのスコープ内に無ければ外のスコープと辿っていき、最終的にはグローバル変数を確認する仕様になっています。

---

【コメント部分】

Webpack使ってるなら話が速いですね。

import React from 'react';
import A from './A.js'; // このファイルに外出ししたい
var B = React.createClass({
  getWindowSize:function() {
    // 共通化したい処理
  },
  render:function() {
    return ()
  }
});

importすると、そのスコープのA変数に外出しした関数が詰まっています。
なので下記のように修正します。

A.js

export default function () {
  // 共通化したい処理
}

本編

import React from 'react';
import A from './A.js';
var B = React.createClass({
  getWindowSize: A, // 共通化した関数Aを指定
  render:function() {
    return ()
  }
});

Comments

[cheche0830]

webpackを使用しています。

import React from 'react';
import A from './A.js';

のような感じで外部コンポーネントを読み込んでおります。

現状、

import React from 'react';
import A from './A.js';
var B = React.createClass({
getWindowSize:function() {

},
render:function() {
return ()
}
});

のような感じで書いているのですが、
getWindowSize:function() {

},
部分をA.jsに書けば、Bの方にはいちいち書かなくても
使えるということでしょうか？

[cheche0830]

ありがとうございます！！！
そのような書き方ができるのですね。重ね重ね申し訳ありませんが、
読み込みたい関数が複数ある場合はひとつずつファイルを分ける幹事でしょうか？？

[miyabi-sun]

そうです。
1関数1ファイルにしておくと、関数＝ファイルとしてディレクトリで管理出来るようになります。
また個別にimportして動作を実行するNode.jsのコードを書いてテストが出来るので捗ります。

[cheche0830]

ありがとうございまーす！！