Свойство 'XYZ' не существует для типа 'Readonly <{children ?: ReactNode; }> & Readonly <{}> ' - PullRequest
Новая
       16

Свойство 'XYZ' не существует для типа 'Readonly <{children ?: ReactNode; }> & Readonly <{}> '

0 голосов
/ 10 сентября 2018

ИСПРАВЛЕНО: я деинсталлировал VScode, typcript и eslint глобально.После переустановки VScode все снова работало волшебным образом.

ОБНОВЛЕНИЕ: После установки библиотеки @ types / реагировать я по-прежнему получаю похожую ошибку только для RecipeList.js и Recipe.js , как упоминалосьin Свойство 'props' не существует для типа 'Home' или Свойство TypeScript 'props' не существует :

Свойство 'recipes' не существует для типа'Readonly <{children ?: ReactNode;}> & Readonly <{}> '.

![Similar error after installing @types/react library

ОРИГИНАЛ: Итак, я новичок в React и по какой-то причине на VSCode я получаю синтаксисошибка при попытке доступа к .props для RecipeList.js и Recipe.js.

Вот пример кода для 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>
        )
    }
}

Снимок экрана.ошибка реквизита

Однако проект не выдает ошибок во время компиляции, и веб-сайт работает отлично.

Снимок экрана приложения, работающего нормально, без ошибок консоли Chrome или терминала

Я думаю, что это меньше связано с моим кодом, и в особенности с TypeScript или каким-то предустановленным конфигом с Javascript для VScode, испытывающим затруднения при определении свойства .props для каждого компонента, потому что у меня возникают похожие проблемыкогда я встроил React Tutorial Project в свой редактор (я даже скопировал и вставил окончательный код index.js с сайта просто для уверенности), несмотря на то, что приложение работало нормально, без ошибок во время компиляции.

Скриншот тТе же ошибки .prop после следующего React Tutorial

Единственный способ решить эту проблему - если я на самом деле жестко закодирую и создаю свойство 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"
 }

1 Ответ

0 голосов
/ 10 сентября 2018

Вы должны определить, как будут выглядеть ваши реквизиты и состояние, используя интерфейс и универсальную реализацию React.Component

в TypeScript. 
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, чтобы указать, что это файл React с использованием TypeScript -> Recipe.tsx
  • Пожалуйста, настройте типы (строки) в соответствии с вашими данными.
  • Используйте IRecipeState, чтобы определить структуру состояния вашего компонента (this.state.fooBar). Теперь можно оставить его пустым, поскольку вы не используете состояние.
  • Убедитесь, что вы делаете то же самое для другого компонента, который выдает ошибку (RecipeList.js)
...