Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
106
Help us understand the problem. What is going on with this article?
@HIGAX

【Q&A】ReactJSのComponentをimport,exportする

More than 5 years have passed since last update.

こんな実装がしたい

Componentを別ファイルに分離して、
必要なときだけimportするスタイル

import React from 'react';
import Comp1 from './comp/comp1';
import Comp2 from './comp/comp2';

class ParentComp extends React.Component {
  render() {
    return (
      <div>
        <Comp1 />
        <Comp2 />
      </div>
    );
  }
}

ReactDom.render(
  <ParentComp />,
  document.getElementById('components')
);

Q1. どうやって実装する?

A. Exportする

comp1.js

import React from 'react';

export default class Comp1 extends React.Component {
  render() {
    return (
      <div>
        Comp 1.
      </div>
    );
  }
}

Q2. export default classって何?

A. そのclassがimportされるときにdefaultで呼ばれるってこと

// このとき自動的にdefault classが呼ばれる
import Comp1 from './comp/comp1';

Q3. じゃあdefaultを付けなかったら?

A. どのclassをimportするか指定する必要がある

import {Comp1} from './comp/comp1';

Q4. じゃあ複数のclassを定義して、個別にimportできる?

A. Exactly(そのとおりでございます)

2つのclassを定義して

import React from 'react';

export class Comp1 extends React.Component {
  render() {
    return (...
    );
  }
}

export class Comp2 extends React.Component {
  render() {
    return (...
    );
  }
}

個別にimportできます。

import {Comp2} from './comp/comps';

Q5. 気をつけるべきことは?

A. defaultを付けたclassは、個別に指定するとエラーになるケースがある。

export default class DefComp...
export class NotDefComp...

のようなコードだったとして、

// OK DefCompが呼ばれる
import DefComp from '...';

// OK DefCompとNotDefCompが呼ばれる
import {DefComp, NotDefComp} from '...';

// OK NotDefCompが呼ばれる
import {NotDefComp} from '...';

// NG default指定したclassのみを個別に呼ぶことはできない
import {DefComp} from '...';

となるので注意。
1つのファイルに複数のclassを定義する場合、
default指定とそうじゃないものを混ぜない方が無難だと思われる。

106
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
HIGAX

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
106
Help us understand the problem. What is going on with this article?