React项目启动报错：index.js第4行出现Unexpected token '='

这个错误的根源有两个核心问题，咱们一步步拆解解决：

1. static属性必须放在组件类内部 #

你现在的代码里，static propTypes直接写在了类定义的外面——这是语法错误，static关键字只能用于类的成员（静态属性/方法）。首先得把所有组件逻辑包裹在一个React组件类里，再把static propTypes移到类的内部。

2. 可选：兼容不支持类字段语法的环境 #

如果你的项目Babel没配置支持类字段语法（就是直接在类里写static propTypes = {}这种写法），可以改用传统的静态属性赋值方式，这种写法不需要额外的Babel插件，兼容性更好。

修正后的完整代码示例 #

方式一：使用类字段语法（需Babel支持）

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

class MyCalendarComponent extends React.Component {
  // 把static propTypes放在类内部
  static propTypes = {
    value: PropTypes.string,
    onChange: PropTypes.func.isRequired
  }

  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2,
      calendarOpened: false,
      selected: [],
      day: new Date().getDate(),
      month: new Date().getMonth() + 1,
      year: new Date().getFullYear()
    };
    // 别忘了绑定所有需要用到this的方法
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.selectDate = this.selectDate.bind(this);
    this.changeInfo = this.changeInfo.bind(this);
    this.openCalendar = this.openCalendar.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    alert('number of guest: ' + this.state.numberOfGuests);
    alert('is going: ' + this.state.isGoing);
  }

  selectDate (evt) {
    this.setState({ selected: evt.iso, calendarOpened: false })
  }

  // 切换月份/年份的方法
  changeInfo ({ day, month, year }) {
    this.setState({ day, month, year })
  }

  openCalendar () {
    this.setState({calendarOpened: true})
  }

  // React组件必须有render方法返回JSX
  render() {
    return (
      <div>
        {/* 这里写你的组件UI代码 */}
      </div>
    );
  }
}

export default MyCalendarComponent;

方式二：传统静态属性赋值（无需额外Babel配置）

如果不想调整Babel配置，可以把propTypes移到类外面赋值：

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

class MyCalendarComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2,
      calendarOpened: false,
      selected: [],
      day: new Date().getDate(),
      month: new Date().getMonth() + 1,
      year: new Date().getFullYear()
    };
    // 绑定所有需要用到this的方法
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.selectDate = this.selectDate.bind(this);
    this.changeInfo = this.changeInfo.bind(this);
    this.openCalendar = this.openCalendar.bind(this);
  }

  // 其他方法保持不变...

  render() {
    return (
      <div>
        {/* 组件UI代码 */}
      </div>
    );
  }
}

// 在类外部定义静态propTypes
MyCalendarComponent.propTypes = {
  value: PropTypes.string,
  onChange: PropTypes.func.isRequired
};

export default MyCalendarComponent;

额外提醒 #

• 记得导入React和PropTypes（React 15.5+版本需要单独安装prop-types包）
• React组件必须包含render方法并返回JSX，否则无法正常渲染
• 类内部的自定义方法需要绑定this，或者改用箭头函数定义方法（比如selectDate = (evt) => {...}），避免this指向错误

内容的提问来源于stack exchange，提问作者chandni