Reactの（というかES6の）import/exportについてメモ

こういうの書かないと忘れてしまう。49歳なので。

基本形（1つのファイルに1つExport）

export const Foo = () => {
    return <div className="foo">Foo</div>
}

import FooBar from 'components/export'
function App(){ 
     return <FooBar/>
}

export default しているので、受ける側は好きな名前でimportできる。

2つ以上exportする

色々な方法がある。とりあえず理解したのだけ。

1つのObjectにして返す

const Foo = () => {
}
const Bar = () => {
}
export default {Foo, Bar}

import FooBar from 'components/export'
function App(){ 
     return <FooBar.Foo/><FooBar.Bar/>
}

それぞれの定義時にexport宣言

export const Foo = () => {
}
export const Bar = () => {
}

これもimportで受けるときは1つのObjectとして扱う。

import {Foo, Bar} from 'components/export'
function App(){ 
     return <Foo/><Bar/>
}

それぞれの定義時にexport宣言でdefaultを使う

defaultは変数なので、変数代入しているアロー関数には使えない。そして、defaultは先頭のexportでなくてもどれにつけてもよい。

export const Foo = () => {
}
export default function Bar() {
}

受け取る側は、先頭にdefault宣言したものが来る。

import MyBar, {Foo} from 'components/export'
function App(){ 
     return <Foo/><MyBar/>
}

default宣言だけほしい場合は後のは書かなくてもよい。

import MyBar from 'components/export'
function App(){ 
     return <MyBar/>
}

名前を変えてexport

import するときじゃなくて、exportするときに名前を変えることもできる。

const Foo = () => {
}
const Bar = () => {
}
export {Foo as MyFoo, Bar}

import {MyFoo, Bar} from 'components/export'
function App(){ 
     return <MyFoo/><Bar/>
}

この時、export Foo as MyFoo だとだめ。export {Foo as MyFoo}としてimport側は import {MyFoo} from "components/export" とする。

たくさんexportしてるモジュールのimportが面倒な場合は*を使うとちょっと楽。

いっぱいexportしてるのを

export const Foo1 = () => {}
export const Foo2 = () => {}
export const Foo3 = () => {}
export const Foo4 = () => {}
export const Foo5 = () => {}
export const Foo6 = () => {}

受け取る側は、逐一調べてimportしないといけないの大変なので。

import {Foo1, Foo2, Foo3, Foo4, Foo5, Foo6 } from 'components/export'
function App(){ 
     return <Foo1/><Foo2/><Foo6/>
}

って逐一やらなくても

import * as F from 'components/export'
function App(){ 
     return <F.Foo1/><F.Foo2/><F.Foo6/>
}

とできる。