React — 语法错误：Unexpected token, expected ；答案

【问题标题】：React — Syntax error: Unexpected token, expected ;React — 语法错误：Unexpected token, expected ；
【发布时间】：2017-12-29 23:28:43
【问题描述】：

由于某种我无法弄清楚的原因，我在以下 React 组件中遇到了语法错误。错误出现在renderItem() 上的第一个curly bracket 中。怎么了？

提前谢谢你。

import _ from 'lodash';
import React from 'react';
import { ToDoListHeader } from './todo-list-header';
import { ToDoListItem } from './todo-list-item';

export const ToDoList = (props) => {
  renderItems() {
    return _.map(this.props.todos, (todo, index) => <ToDoListItem key={index} {...todo} />)
  }

  return (
    <div>
      <table>
        <ToDoListHeader />
        <tbody>
          {/* {this.renderItems()} */}
        </tbody>
      </table>
    </div>
  );
}

【问题讨论】：

标签： javascript reactjs syntax-error components

【解决方案1】：

  renderItems = () => {
    return _.map(this.props.todos, (todo, index) => <ToDoListItem key={index} {...todo} />)
  }

您的 varian 将适用于 es6 类。

【讨论】：

谢谢安德鲁。

【解决方案2】：

嗯，你得到了错误，因为你是在类中定义函数，而不是在函数中。使用正确的函数声明。

export const ToDoList = (props) => {
  const renderItems = () => {
    return _.map(this.props.todos, (todo, index) => <ToDoListItem key={index} {...todo} />)
  }

  return (
    <div>
      <table>
        <ToDoListHeader />
        <tbody>
          {/* {this.renderItems()} */}
        </tbody>
      </table>
    </div>
  );
}

如果只有 ToDoList 是一个类，它会很好用。

【讨论】：

感谢您的详细解释。