React —语法错误：意外令牌，预期；

Question

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

先感谢您。

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>
  );
}

Answer 1

好吧，您会因为在类而不是函数中定义函数而出错。使用正确的函数声明。

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一个类，也可以正常工作。