React弹窗组件创建时出现语法错误求助

首先看你遇到的语法错误，问题出在PopUp组件里的handleClick = () => {}写法上——这种类字段形式的箭头函数属于ES的提案语法，默认情况下你的Babel编译器不支持这个语法，所以才会抛出Unexpected token错误。下面给你两种解决思路：

方案一：配置Babel支持类字段语法 #

1. 先安装必要的Babel插件：

npm install --save-dev @babel/plugin-proposal-class-properties
# 如果你用yarn的话
yarn add -D @babel/plugin-proposal-class-properties

2. 修改你的Babel配置文件（比如.babelrc或者babel.config.json），把这个插件加进去：

{
  "presets": ["@babel/preset-react", "@babel/preset-env"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

这样Babel就能正确编译类字段语法了。

方案二：改用传统的类方法+this绑定（无需修改Babel配置） #

如果你不想调整Babel配置，可以把箭头函数换成普通类方法，然后在构造函数里绑定this的指向，同样能保证handleClick里的this指向组件实例：

import React, { Component } from "react";

export default class PopUp extends Component {
  constructor(props) {
    super(props);
    // 绑定this到handleClick方法上
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.props.toggle();
  }

  render() {
    return (
      <div className="modal">
        <div className="modal_content">
          <span className="close" onClick={this.handleClick}>
            &times;
          </span>
          <form>
            <h3>Register!</h3>
            <label> Name: <input type="text" name="name" /> </label>
            <br />
            <input type="submit" />
          </form>
        </div>
      </div>
    );
  }
}

额外注意：主文件里的弹窗触发逻辑有误 #

除了语法错误，你主文件里的按钮onClick写法是错的——onClick需要接收一个事件处理函数，而不是直接渲染JSX组件。正确的做法是通过state来控制弹窗的显示/隐藏：

1. 首先在Calendar组件的state里添加一个控制弹窗的状态：

class Calendar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // 其他已有状态...
      isModalOpen: false
    };
    // 记得绑定toggle方法的this，或者用箭头函数
    this.togglePop = this.togglePop.bind(this);
  }

  // 或者用箭头函数，不用手动绑定this
  togglePop = () => {
    this.setState(prevState => ({ isModalOpen: !prevState.isModalOpen }));
  }

  // 其他方法...
}

2. 修改按钮的onClick，直接调用togglePop方法：

<button 
  type="submit" 
  form="form1" 
  className="save-timetable add-button" 
  data-for="sis-btn-tooltip" 
  data-tip 
  onClick={this.togglePop}
>
  <img src="/static/img/star.png" alt="SIS" style={{ marginTop: '2px' }} />
</button>

3. 在render方法的合适位置（比如组件末尾），根据state来渲染弹窗：

render() {
  // 其他已有代码...
  return (
    <div>
      {/* 其他已有JSX结构... */}
      {this.state.isModalOpen && <PopUp toggle={this.togglePop} />}
    </div>
  );
}

这样点击按钮时，就会通过修改state来显示/隐藏弹窗了。

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