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只是一个类，它会正常工作。

Answer 2

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

你的varian将适用于es6类。

React - 语法错误：意外的令牌，预期;

2 个答案: