web-dev-qa-db-ja.com

複数のReact単一モジュール内のコンポーネント

私はbrowserifyのこと全体に慣れていない。私はbrowserify + reactify + gulpを使用して、Reactアプリケーションを変換、縮小、および結合しようとしています。単一のReact.createClass単一のmodule.exports = MyComponentすべてが正常に機能します。私は物理的に同じファイルでホストし、プロジェクト間で再利用するいくつかの共有コンポーネントがあるため、複数のコンポーネントをエクスポートしたいと思います。私は配列を試しました：

module.exports = [Component1, Component2]

また、複数のプロパティを持つオブジェクトを試しました：

module.exports = {Comp1: Componenet1, Comp2: Component2}また、オブジェクト内のcreateClassへの呼び出しをインライン化しようとしましたが、それは役に立ちませんでした。

これを行う方法はありますか、すべてのコンポーネントを個別のJSXファイルに分割する必要がありますか？

reactjsgulpbrowserify
18
Elad Lachmi

複数のコンポーネントを1つのファイルに入れ、提案されたようにオブジェクトをエクスポートしました。

module.exports = {
    comp1: Component1,
    comp2: Component2
}

次に、それらが使用される場所

var comp1 = require('your/path/to/components').comp1;
var comp2 = require('your/path/to/components').comp2;
25
Crob

index.jsファイルを/components/フォルダーに入れて、このようにすることができます

/components/index.js

import Users from './Users/Users';
import User from './Users/User';


module.exports = {
  User,
  Users
}

インポート

import { Users, User } from './components';

ご覧のとおり、ファイルに名前を付けましたindex.js。これにより、インポート宣言に書き込むことができなくなります。 index.js以外の名前でファイルに名前を付けたい場合、インポートでファイルの名前を記述する必要があります。Nodeは想像してみてください ！ ^^

31
Julha

関数を使用してコンポーネントを返します。

 module.exports = {
   comp1: function(){
     return Component1;
   }
 }

それから

var myCompontents = require('./components');
var comp1 = myComponents.comp1();
0
Tim Yeung