React (初めてのTypescript)

Question

React (Typescript)を用いてプログラミングをしております。

今回カレンダーを作りたいなと思っています。
練習ではありますが、今回初めてreactをtypescriptで実装したいいなと考えております。
###問題
以下のコードがなぜ動かないのかがいまいちわかりません。
今回index.tsxにCarという名前の関数をインポートして使おうと考えております。
原因が調べてもいまいちわかりませんでした、

import React from 'react'
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";

export const Car : FC = ()=>{
    return (
        <div>
            <FullCalendar plugins={[dayGridPlugin]} initialView="dayGridMonth" />
        </div>
    );
}

import React from 'react'
import { NextPage } from 'next'
import Calender from './carendar'


const Index: NextPage = () => {

  return (
    <div>
      <header>
        <p>こんにちは</p>
      </header>
      <Calender />
    </div>
  )
}

export default Index

###試したこと
今回jsonファイルを見てもライブラリ自体のインポートは完了しているため原因はTyoescriptの書き方にあると考えております。
どうしたらエラーなく動くでしょうか、また原因は何になるのでしょうか？よろしくお願いします。

Answer 1

export const Car したものは import { Car } する必要があります。
参考: エクスポートとインポート (現代の JavaScript チュートリアル)

// calendar.tsx
export const Car: React.FC = () => { ... }

// index.tsx
import { Car } from './calendar';

// または、Car を import して Calendar という名前で使いたい場合、
import { Car as Calendar } from './calendar';

逆に、import Calendar ({} なし) したい場合は export default します。
この場合、import 側と export 側で異なる名前をつけても構いません。

// calendar.tsx
const Car: React.FC = () => { ... }

export default Car;

// index.tsx
import Calendar from './calendar';

ちなみに、カレンダーの綴りは calendar です。

Comments

[yohu_gakusei]

ありがとうございます！解決いたしました！！