質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.92%

【TypeScript】Reactのコンポーネントに値を渡すとIntrinsicAttributesに代入できないと怒られる

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 140

moimoi_sushi

score 20

前提・実現したいこと

子コンポーネント(UI側)にデータを渡したいです。

発生している問題・エラーメッセージ

子コンポーネント(UI側)へ変数を入れると下記メッセージがVSCode上で指摘されます

Type '{ result: dammyType[]; }' is not assignable to type 'IntrinsicAttributes & dammyType[] & { children?: ReactNode; }'.
  Property 'result' does not exist on type 'IntrinsicAttributes & dammyType[] & { children?: ReactNode; }'


(7.11追記:↑すみません、エラー内容に修正ありです。テラテイルへ投稿後にProps側にもdammyType[]を代入していました。その場合エラーメッセージに「dammyType[]」の記載もされるようになっており記載もれしていました。)

上記のように怒られます。

該当のソースコード

containers/Element/element.tsx側

import React, { FC } from 'react';
import Element from '../../../components/pages/Element/element';
import dammyData, { dammyType } from '../../../seed/dammy';

const getData = (): dammyType[] => {
  //本来はデータをsortしてからreturnする処理が入る
  return dammyData;
}

const ElementContainer: FC = () => {
  const result = getData();

  return <Element result={result} />;
};

export default ElementContainer;


<Element result={result} />の「result={result}のresult=」に対して怒られています。

dammyData と { dammyType } ファイル中身は以下の通りです

const dammyData = [
    {
      FoodGroup: 1,
      FoodNumber: '01001',
      id: 1,
    },
    {
      FoodGroup: 2,
      FoodNumber: '01002',
      id: 2,
    },
];

export interface dammyType {
  FoodGroup: number,
  FoodNumber: string,
  id: number
}

export default dammyData;


必要でない情報とは思いますが実際には2000個以上の40要素ずつのデータが格納されたものを扱う予定です。まずは簡易化して動かそうとしています。

試したこと

データのボリュームが大きくて分からなかったため簡易的なdammyデータで試しています。

補足情報(FW/ツールのバージョンなど)

React+TypeScriptです。
cssはEmotion
バックエンドはFirebaseを利用します

追記:Reactの型に"@types/react": "^16.9.0"を使っています。

追記1:<Element />側のソースコード

components/Element/element.tsx側

/** @jsx jsx */
import { Fragment, FC } from 'react';
import { css, jsx } from '@emotion/core';

import Header from '../../common/templates/header';
import Footer from '../../common/templates/footer';
import SocialBtn from '../../common/parts/button/social';
import StuffFilter from '../../common/parts/filter/stuffFilter';

import { Font } from 'components/common/styles/CssValue';
import { dammyType } from '../../../seed/dammy';

//cssの記述を省略

const Element: FC<dammyType[]> = ({result}) => (
  <Fragment>
    <Header />
    <div css={content}>
      <div css={titleH1}>
        //titleのテキスト
      </div>
      <div css={socialSpace}>
        <SocialBtn />
      </div>
      <div css={article}>
        <p>
      //記事のテキスト
        </p>
      </div>
      <div>
        //孫コンポーネント(<StuffFilter />)へ渡す予定ですがひとまずここでpropsを表示させたい
        {result}
      </div>
    </div>
    <Footer />
  </Fragment>
);

export default Element;


子コンポーネント側ではエラー表示はありませんが上記のようになっています。
追記:props側のresult、分割代入の形{result}へ修正しました。その場合の警告メッセージは以下の通りです。

Property 'result' does not exist on type 'dammyType[] & { children?: ReactNode; }'.

追記2:App.tsx側のソースコード追加

App.tsx側にもエラーが表示されていたので追記です。→Component側ではなくContainer側のコンポーネントを呼び出すことで解決。依然として、質問のエラーは残っています。

Type '{}' is missing the following properties from type 'dammyType[]': length, pop, push, concat, and 28 more.ts(2740)
/** @jsx jsx */
import { FC } from 'react';
import { css, jsx } from '@emotion/core';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { Font, Color } from './components/common/styles/CssValue';

import './components/common/styles/ress.css';
import Home from './components/pages/Home/home';
import ElementContainer from './containers/pages/Element/element';

//cssの省略

const App: FC = () => (
  <div css={Global}>
    <BrowserRouter>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route exact path="/elm">
          <ElementContainer />
        </Route>
      </Switch>
    </BrowserRouter>
  </div>
);
export default App;
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mottox2

    2020/07/11 05:18

    子要素のElement側の型定義が不足している可能性があるので、Elementのソースも掲載してもらえますか?

    キャンセル

  • moimoi_sushi

    2020/07/11 13:02

    指摘ありがとうございます、Element側のソースも載せました。

    キャンセル

回答 1

checkベストアンサー

+1

Element コンポーネントの props の受け取り方の記載の仕方の問題かと思います。

まず、FCのジェネリクスの基本についてですが、

const SomeComponent: FC<SomePropsType> = (props) => (


とした場合、props の型が SomePropsType です。

質問者さんのコードを見ると {result} の型を dammyType[] として見ており、当然 dammyType[] はリストなので、result というキーは存在せずエラーになっています。

以下のように props 用の型定義すれば受け取れるかと思います。

const Element: FC<{result: dammyType[]}> = ({result}) => (

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/11 15:39

    ありがとうございます!怒られなくなりました。
    理解が足りておらずブランケットのところまで考慮できていませんでした。

    コード自体は下記のようにinterfaceを用いてpropsを扱うことにしました。
    interface dammyTypeProps {
    result: dammyType[]
    }

    const Element: FC<dammyTypeProps> = ({result}) => ( //略 );

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る