React - Syntaxfehler: Unerwartetes Token, erwartet;

Question

Aus irgendeinem Grund, dass ich es nicht herausfinden kann, erhalte ich einen Syntaxfehler in der folgenden React-Komponente. Der Fehler ist in der ersten curly bracket auf der renderItem(). Was ist los mit dir?

Vielen Dank im Voraus.

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

Nun, Sie bekommen Fehler, weil Sie die Funktion wie in einer Klasse definieren, nicht in einer Funktion. Verwenden Sie eine ordnungsgemäße Funktionsdeklaration.

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

Es würde funktionieren, wenn nur ToDoList eine Klasse wäre, wenn.

Answer 2

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

Ihre varian wird mit es6 Klassen arbeiten.