Question

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

我已经设置好了与已经构建好的组件类似的组件，但是当我尝试运行时，出现一个错误，提示我在调用渲染后，期望用分号代替大括号方法。

我找到了另一个答案，说这通常表示组件内的JSX语法无效，但是我已经以我能想到的所有方式对其进行了重新排列。我尝试将分号作为“冰雹玛丽”放在那儿，但这可以预料会引起更多错误。

tools:theme="@style/MyLightTheme"

这应该显示可用聊天室的列表以及用于添加更多内容的输入字段，但是错误消息如下：

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;

Answer 1

您忘记了}的{{1}}

constructor

Answer 2

我认为您缺少用于关闭构造函数的右花括号。

反应错误-渲染方法后预期的分号？

2 个答案: