javascript - 在 propTypes 中 react 错误

Question

我正在尝试使用 React 创建一个新应用。

我按照 React 网页上的说明创建了一个新应用程序，如下所示:

npm install -g create-react-app

create-react-app my-app

cd my-app

npm start

安装的 React 版本是 15.5.4。

然后，在'Dummy.js'文件中创建一个Dummy类用于学习:

import React from 'react';

class Dummy extends React.Component {
   render() {
      return <div>{this.props.name}</div>
   }
   propTypes : {
      name: React.PropTypes.string.isRequired
   }
}

在 App.js 文件中，我添加了一行 <Dummy name="this is dummy class"/> .

它运行良好，但是当我按照 React 博客 link 中的说明更改语法时,

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

class Dummy extends React.Component {
   render() {
      return <div>{this.props.name}</div>
   }
   Component.propTypes = {
      name: React.PropTypes.string.isRequired
   };
}

然后，它返回语法错误(意外标记):

谁能帮我看看是什么原因？

Answer 1

参见 React propTypes docs对于声明 propTypes 的预期方式:

class Dummy extends React.Component {}

Dummy.propTypes = {
  name: React.PropTypes.string.isRequired
}

---

create-react-app 的 Babel config supports using the following syntax sugar这相当于同一件事:

class Dummy extends React.Component {
  static propTypes = {
    name: React.PropTypes.string.isRequired
  }
}

---

此外，根据文档，从 React v15.5 开始，React.PropTypes 已弃用，取而代之的是单独的 prop-types 包:

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

class Dummy extends React.Component {
  static propTypes = {
    name: PropTypes.string.isRequired
  }
}