React错误- render方法后需要使用分号？

Question

我正在尝试构建一个基本的聊天室应用程序，但我无法理解为什么我的应用程序组件无法呈现。我认为这可能是一个非常基本的问题，但我对编码(和Stack Overflow)总体上来说是个新手，所以我对它一无所知。

我已经设置了与我已经构建的组件类似的组件，它工作得很好，但是当我尝试运行时，我得到一个错误，说在我调用render方法之后，应该在花括号的位置使用分号。

我找到了另一个答案，说这通常表明组件中的JSX语法无效，但我已经用我能想到的每一种方法对其进行了重新排列。我试着将分号放在那里作为Hail Mary，但可以预见的是，这导致了更多的错误。

import React, {Component} from 'react';
import RoomList from './components/RoomList'
import MessageList from './components/MessageList'
import './App.css';
import * as firebase from 'firebase';

// <script src="https://www.gstatic.com/firebasejs/6.1.1/firebase-app.js"></script>

  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "AIzaSyA9oZW7yL_BgNtkODEkOftd8SztNDm6aLw",
    authDomain: "bloc-chat-e5e85.firebaseapp.com",
    databaseURL: "https://bloc-chat-e5e85.firebaseio.com",
    projectId: "bloc-chat-e5e85",
    storageBucket: "bloc-chat-e5e85.appspot.com",
    messagingSenderId: "716557708964",
    appId: "1:716557708964:web:69e9e607313399b0"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);



  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        activeRoom: null
      }

    render() {
      return (
        <div className="App">
         <header className="App-header">
         <RoomList firebase={firebase}>
         </RoomList>
         </header>
       </div>
  );
 }
}

export default App;

这将显示可用聊天室的列表和用于添加更多聊天室的输入字段，但错误消息如下：

  Line 32:  Parsing error: Unexpected token, expected ";"

  30 |       }
  31 | 
> 32 |     render() {
     |              ^

Answer 1

您忘记了constructor的}

  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        activeRoom: null
      }
    }

    render() {
      return (
        <div className="App">
         <header className="App-header">
         <RoomList firebase={firebase}>
         </RoomList>
         </header>
       </div>
  );
 }
}

export default App;

Answer 2

我想你在结束构造函数时遗漏了一个右大括号。