javascript - react 错误 - 渲染方法后预期有分号？

Question

我正在尝试构建一个基本的聊天室应用程序，但我无法理解为什么我的应用程序组件无法呈现。我预计这可能是一个非常基本的问题，但总的来说，我对编码(和堆栈溢出)很陌生，所以它逃避了我。

我的组件设置与我已经构建的组件类似，运行良好，但是当我尝试运行时，我收到一条错误消息，指出在调用渲染后需要用分号代替大括号方法。

我发现另一个答案说这通常表明组件内的 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

您忘记了构造函数的}

  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;