反應錯誤-渲染方法后預期的分號？

Question

我正在嘗試構建一個基本的聊天室應用程序，但是我無法理解為什么我的應用程序組件無法呈現。 我希望這可能是一個非常基本的問題，但是我一般對編碼（和堆棧溢出）是陌生的，所以它在逃避我。

我已經將組件設置為與我已經構建的組件類似，並且可以正常工作，但是當我嘗試運行時，出現一個錯誤，提示在調用render方法后，應該使用分號代替大括號。

我找到了另一個答案，說這通常表示組件內的JSX語法無效，但是我已經以我能想到的所有方式對其進行了重新排列。 我嘗試將分號作為“冰雹瑪麗”放在那兒，但這可以預料會導致更多錯誤。

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

我認為您缺少用於關閉構造函數的右花括號。