web-dev-qa-db-ja.com

プロパティ 'XYZ'はタイプ 'Readonly <{children ?: ReactNode;に存在しません。 }>＆読み取り専用<{}> '

修正：VScode、TypeScript、eslintをグローバルにアンインストールした。 VScodeを再インストールすると、すべてが再び魔法のように機能しました。

更新：@ types/reactライブラリをインストールした後I RecipeList.jsとRecipe.jsの両方で同様のエラーが発生しますで述べたように、プロパティ 'props'は存在しませんタイプ 'Home' または TypeScriptプロパティ 'props'は存在しません ：

プロパティ 'recipes'はタイプ 'Readonly <{children ?: ReactNode;に存在しません。 }>＆Readonly <{}> '。

![Similar error after installing @types/react library

元：だからReactが初めてで、VSCodeの何らかの理由で、RecipeList.jsとRecipe.jsの両方の.propsにアクセスしようとすると構文エラーが発生します。

Recipe.jsのコードサンプルを次に示します。

import React, {Component} from 'react';
import "./Recipe.css";

class Recipe extends Component {

    // props: any; uncommenting this will fix the bug

    render() {
        // don't have to use return and parentheses for arrow with JSX
        const ingredients = this.props.ingredients.map((ing, ind) => (
            <li key={ind}>{ing}</li>
        ));
        const {title, img, instructions} = this.props

        return (
            <div className="recipe-card">
                <div className="recipe-card-img">
                    <img src={img} alt={title}/>
                </div>
                <div className="recipe-card-content">
                    <h3 className="recipe-title">
                        {title}
                    </h3>
                    <h4>
                        Ingredients:
                    </h4>
                    <ul>
                        {ingredients}
                    </ul>
                    <h4>
                        Instructions:
                    </h4>
                    <p>
                        {instructions}
                    </p>
                </div>
            </div>
        )
    }
}

。propsエラーのスクリーンショット

ただし、プロジェクトはコンパイル時エラーをスローせず、Webサイトは完全に正常に動作します。

chromeコンソールまたは端末のエラーなしで正常に動作するアプリのスクリーンショット

私はこれが私のコードと関係が少ないと考えているので、TypeScriptまたはVScode用のJavascriptを使用した何らかのプリセット構成で各コンポーネントの.propsプロパティを特定するのに問題があると考えています。 React Tutorial Project をエディターに挿入します（コンパイル時エラーなしでアプリが正常に動作しているにもかかわらず、サイトから最終的なindex.jsコードをコピーしただけです）。

React Tutorial の後の同じ.propエラーのスクリーンショット

この問題を解決する唯一の方法は、実際に各クラスのpropsプロパティをハードコーディングして作成し、次のように設定することです。

構文エラーの唯一の解決策のスクリーンショット

どんなアイデアでも大歓迎です！どうもありがとうございます！アプリは動作しますが、この意味のないエラーがエディターに表示されるのを少しOCDで見ています。

PS：ここに私の更新された依存関係があります

"dependencies": {
  "@types/react": "^16.4.13",
  "prop-types": "^15.6.2",
  "react": "^16.5.0",
  "react-dom": "^16.5.0",
  "react-scripts": "1.1.5",
  "TypeScript": "^3.0.3"
 }
javascriptreactjstypescriptvisual-studio-codebabel
7
LoopBoi

interface とTypeScriptのReact.Componentの汎用実装を使用して、小道具と状態がどのように見えるかを定義する必要があります

import React, {Component} from 'react';
import "./Recipe.css";

interface IRecipeProps {
  ingredients?: string[];
  title?: string;
  img?: string;
  instructions?: string;
}

interface IRecipeState {
}

class Recipe extends Component<IRecipeProps, IRecipeState> {
    render() {
        const ingredients = this.props.ingredients.map((ing, ind) => (
            <li key={ind}>{ing}</li>
        ));
        const {title, img, instructions} = this.props

        return (
            <div className="recipe-card">
                Your render code here
            </div>
        )
    }
}
  • ファイル拡張子を.tsxに変更して、TypeScriptを使用してReactファイル-> Recipe.tsx
  • データに合わせてタイプ（文字列）を調整してください。
  • IRecipeStateを使用して、コンポーネントの状態（this.state.fooBar）の構造を定義します。状態を使用しないため、今は空のままにしておいてかまいません。
  • エラー（RecipeList.js）をスローする他のコンポーネントに対しても同じことを確認してください。
12
klugjo