猫型iPS細胞研究所

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。

====== export ======

===== improt =====


[[https://qiita.com/HIGAX/items/28f3bec814928b7395da|【Q&A】ReactJSのComponentをimport,exportする]]

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


====== constのexport ======

<code javascript>
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;

</code>

====== classのexport ======

<code javascript>
export class Message {
    getHello() {
        return "Helloworld";
      }
}

</code>

====== default export ======

<code javascript>
//classがimportされるときにdefaultで呼ばれる。
import Componet1 from './comp1';

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

</code>

<WRAP center round tip 100%>
defaultを付けたclassを個別に指定するとエラーになるケースがある！
(defaultの付いていないクラスがあればOK)
</WRAP>

====== エラー ======

<code>
モジュール '"../xxx"' にエクスポートされたメンバー 'xxx' がありません。ts(2305)
</code>
　↓
defaultのexportを<html>{名前}</html>で呼び出しているだけだった。

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

猫型iPS細胞研究所

ユーザ用ツール

サイト用ツール

ページ用ツール