反应解析错误。函数与类

Question

我有一个从 API 检索 JSON 并将其显示为引导列表的小页面。我目前正在将这个庞大的页面移动到 React 中，并且我正在设置组件。

请注意，我仍然不清楚函数和类的正确用法。这就是我怀疑问题所在。

我目前收到以下错误

Failed to compile.

./src/components/Events.js
  Line 3:10:  Parsing error: Unexpected token, expected ";"

  1 | import React from 'react'
  2 | 
> 3 | Function Events (){
    |          ^
  4 | const Events = ({ events }) => {
  5 |   return (
  6 |     <div>

我的文件结构如下（为了清楚起见，删除了一些）：

Public
 | index.html
src
  index.css
  index.js
  | components
      App.js
      Events.js
      Feed.js
      ...
     

我添加了以下App.js、Events.js 和Feed.js。

App.js

import React from 'react'
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { Navigation, Footer, Home, Feed, Search, About, Contact } from "../components";


function App() {
  return (
<Router>


      <Navigation />

      <Switch>
        <Route path="/" exact component={() => <Home />} />
        <Route path="/feed" exact component={() => <Feed />} />
        <Route path="/search" exact component={() => <Search />} />
        <Route path="/about" exact component={() => <About />} />
        <Route path="/contact" exact component={() => <Contact />} />
      </Switch>

      <Footer />

    </Router>
  )
}

export default App

Feed.js

import React, {Component} from "react";
import Events from '/components';

class Feed extends Component {

  state = {
  events: []
}

componentDidMount() {
  fetch('http://127.0.0.1:5002/events')
  .then(res => res.json())
  .then((data) => {
    this.setState({ events: data })
  })
  .catch(console.log)
}

render() {
  return (
    <div className="feed">
      <div class="container">
        <div class="row align-items-center my-5">
          <div class="col-lg-7">
            <img
              class="img-fluid rounded mb-4 mb-lg-0"
              src="http://placehold.it/900x400"
              alt=""
            />
          </div>
          <div class="col-lg-5">
            <h1 class="font-weight-light">Contact</h1>
            <p>
              Lorem Ipsum is simply dummy text of the printing and typesetting
              industry. Lorem Ipsum has been the industry's standard dummy text
              ever since the 1500s, when an unknown printer took a galley of
              type and scrambled it to make a type specimen book.
            </p>
          </div>
          <Events events={this.state.events} />
        </div>
      </div>
    </div>
  );
}
}
export default Feed;

Events.js

import React from 'react'

Function Events (){
const Events = ({ events }) => {
  return (
    <div>
      <center><h1>Event List</h1></center>
      {events.map((event) => (
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">{event.title}</h5>
            <h6 class="card-subtitle mb-2 text-muted">{event.date}</h6>
          </div>
        </div>
      ))}
    </div>
  )
};
}

export default Events

Answer 1

这是函数声明。使用函数声明，您可以直接开箱即用，这可能超出了问题的范围。

function myFunction() {}

这是一个函数表达式。 这些代码示例的含义都是一样的：“创建一个函数，并将其放入变量myFunction”。

const myFunction = () => {}
or 
const myFunction = function () {}

如果您阅读此内容会更好-> https://www.freecodecamp.org/news/when-to-use-a-function-declarations-vs-a-function-expression-70f15152a0a0/

function Events({ events }) {
  return (
    <div>
      <center><h1>Event List</h1></center>
      {events.map((event) => (
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">{event.title}</h5>
            <h6 class="card-subtitle mb-2 text-muted">{event.date}</h6>
          </div>
        </div>
      ))}
    </div>
  )
}

Answer 2

将Function Events () 替换为function Events()。