PropTypes дает мне ошибку с типом строки - PullRequest
Новая
       7

PropTypes дает мне ошибку с типом строки

3 голосов
/ 15 января 2020

У меня была ошибка, связанная с использованием библиотеки prop-types в работающем приложении React 16 после обновления модулей узла.

Я создал новый проект React 16 create-Reaction-app, чтобы проверить это проблема и ошибка происходят аналогичным образом.


Мой код:

index. js file: 

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
    <App name="Test prop-types"/>, 
    document.getElementById('root')
);

Приложение. js Файл: 

import React from 'react';
import PropTypes from 'prop-types';

function App(props)
{
  let name: PropTypes.string;

  name = (props.name)
    ? props.name
    : "Xxx";

  return (
    <div className="App">
      <header className="App-header">
        <p>Learn React - {name}</p>
      </header>
    </div>
  );
}

export default App;


Ошибка: 

Line 8:23:  Parsing error: Unexpected reserved type string

   6 | function App(props) 
   7 | {
>  8 |   let name: PropTypes.string


Мой пакет. json содержание: 

{
  "name": "test-prop-types",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}


Do c до использовать проп-типы.

1 Ответ

1 голос
/ 15 января 2020

Вы неправильно определяете проптипы. Проптипы определены вне определения компонента: 

// This is wrong
function App(props) 
    {
        let name: PropTypes.string

Правильный способ установки проптипов: 

import React from 'react';
import PropTypes from 'prop-types';

function App(props)
{
  let name = (props.name)
    ? props.name
    : "Xxx";

  return (
    <div className="App">
      <header className="App-header">
        <p>Learn React - {name}</p>
      </header>
    </div>
  );
}

// Setting the proptypes of the `App` component
App.propTypes = {
  name: PropTypes.string
};

export default App;
...