目次

export

improt

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

・・・
    return (
      <div>
        <Component1 />
        <Component2 />
      </div>
    );
・・・

constのexport

import * as React from 'react';　// これがないと<li>とかが
 
const Component1 = (props:any) => {
    const listItems = props.names.map((name: React.ReactNode) => 
        <li>{name}</li>
    );
    return (
        <ul>{listItems}</ul>
    );
};
 
export default Component1;

classのexport

export class Message {
    getHello() {
        return "Helloworld";
      }
}

default export

//classがimportされるときにdefaultで呼ばれる。
import Componet1 from './comp1';
 
//defaultがなければどのclassをimportするか指定する必要がある。
import {Componet1,Componet2} from './comp1';

defaultを付けたclassを個別に指定するとエラーになるケースがある！
(defaultの付いていないクラスがあればOK)

エラー

モジュール '"../xxx"' にエクスポートされたメンバー 'xxx' がありません。ts(2305)

　↓
defaultのexportを{名前}で呼び出しているだけだった。 

import {name} from './comp1'; // デフォルトがついていると個別では呼び出せない場合がある。
　↓
import name   from './comp1'; // OK