React代码中render语句提示需要添加分号的原因是什么

错误根源 #

你混淆了React两种组件的语法规则：

• 只有基于class声明的类组件，才需要自定义render()方法返回JSX结构
• 你当前写的是函数组件，语法要求直接在函数体内return JSX即可，不需要额外包裹render()方法

你在普通函数内部直接写render() { ... }的写法不符合原生JS语法规范，JS解析器会把这段代码识别为「调用render函数」的语句，调用语句末尾要求添加分号，而你后续跟的是代码块{}，因此触发了分号缺失的语法报错。另外注意React组件名必须大写开头，你原代码的test小写也不符合规范。

修复方案 #

方案1：保留函数组件写法（官方更推荐的写法）

import React, { useState, useEffect } from 'react';
import './App.css';
import firebase from 'firebase/compat/app';
import 'firebase/database';
import 'firebase/firestore';

function Test() {
  // 函数组件直接返回JSX即可，无需定义render方法
  return (
    <div>
      <p>Display</p>
    </div>
  );
} 
  
export default Test;

方案2：改为类组件写法

import React, { Component } from 'react';
import './App.css';
import firebase from 'firebase/compat/app';
import 'firebase/database';
import 'firebase/firestore';

// 类组件需要继承React.Component
class Test extends Component {
  // 类组件内才需要定义render方法
  render() {
    return (
      <div>
        <p>Display</p>
      </div>
    );
  }
} 
  
export default Test;

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