2017-03-08 1 views
0

リファクタリングして、コンポーネントとコンテナを別々のディレクトリに分けようとしています。私はpattern Tyler McGinnis usesに従っています。React Native - index.jsファイルでコンポーネントとコンテナを分離できません - 再エクスポートモジュール

私はこのようなコンポーネントをインポートできるようにしたいと思います:

import { CardReplacement } from './Containers'

ので、私はあなたがディレクトリがここに作る見ることができます 適切なindex.jsに私のすべてのコンポーネントを輸出しています:

enter image description here

また、私はindex.jsファイルにエクスポートするよ、私のコンポーネントでexport defaultを使用しています。このような

しかし、私は取得していますエラーが:

enter image description here

任意のアイデア:

"予期しないトークン、{(7 1)期待されますか"? Reactプロジェクトでこのパターンを使用しましたが、うまくいきました。そこには、これを防ぐ原則がありますか?

さらに調査したところ、これはバベルのエラーで、インストールしようとしましたが、babel-preset-react-native-stage-0が修正されませんでした。

+0

ウォンあなたのコンポーネントのどれかが互いに依存している場合、これは循環依存関係を作成しますか? – SimpleJ

+0

@SimpleJ、お互いに依存せず、2つのディレクトリでロジックとプレゼンテーションを分けることができます。 – Turnipdabeets

+0

あなたの質問を編集し、エラーメッセージ(および場合によってはコードの他の部分)をイメージではなく実際のテキストとして含めてください。検索エンジンは画像のテキストにインデックスを付けることができないので、後で同じ問題が発生した場合でも他の人があなたの投稿を見つけられなくなります。 – simbabque

答えて

0

私は解決策を見つけましたが、以前はこの構文を見たことがありませんでした。

まずインポートしてからエクスポートする必要があります。あなたも、このようにそれを行うことができるはず

import CardReplacement from './CardReplacement/CardReplacement' export {CardReplacement}

簡単な使用export CardReplacement from './CardReplacement/CardReplacementに、babel-preset-react-native-stage-0

0

をインストールします:私はまた、輸出を中心に{}を使用する必要が

export { default as CardReplacement } from './CardReplacement/CardReplacement'

+0

あなたはそれをインポートし、それを{}でエクスポートする必要がある場合がありますか?私はなぜそれを{}でエクスポートするか、最初にインポートする必要があるのか​​分かりません。 – Turnipdabeets

+0

コンポーネントのエクスポートのデフォルトを使用する場合は、名前は付けられません。名前のないコンポーネントは、名前を付けずにエクスポートすることはできません。エクスポートだけを使用すると(例: 'Export class CardReplacement extends Component')、インデックスファイルの' export {CardReplacement} from ... 'を実行する必要があります。しかしそれ以外のところでは 'import {CardReplacement}'をしなければなりません。詳細:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export –

関連する問題