export default

export default というシンタックスについて

export default と書くシンタックスがあり、先ほど説明したものとは少し異なります。大きな違いは以下の通りです。

export default したものに関しては、import するときに {} を使わない。
1 ファイル内で、1 export default だけしかできない。(通常の export は複数できる)
そのため、1ファイルに1コンポーネントだけを作る場合には、default を使う場合がスタンダード

// index.js

import React from "react";
import { render } from "react-dom";
// export default のパターン
import ClassComponent1 from "./ClassComponent1";
import ClassComponent2 from "./ClassComponent2";
// export (default ではない)パターン
import { ClassComponent3 } from "./ClassComponent3";

render(
  <div>
    <ClassComponent1 />
    <ClassComponent2 />
    <ClassComponent3 />
  </div>,
  document.getElementById("root")
);

export default するパターンの書き方

// ClassComponent1.js

import React from "react";

// class の定義をすると同時に 
// export default する書き方
export default class ClassComponent extends React.Component {
  render() {
    return <div>ClassComponent</div>;
  }
}

// ClassComponent2.js

import React from "react";

// 一旦 class の定義をしてから
class ClassComponent2 extends React.Component {
  render() {
    return <div>ClassComponent2</div>;
  }
}

// 定義した class を export default するやり方
export default ClassComponent2;

export default 「しない」パターンの書き方

// ClassComponent3.js

import React from "react";

// default はしない export
export class ClassComponent3 extends React.Component {
  render() {
    return <div>ClassComponent3</div>;
  }
}

PreviousES2015 の import / export Next2章の復習

Last updated 7 years ago