React - 語法錯誤：意外的令牌，預計;

Question

由於某些原因，我無法弄清楚，我在下面的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> 
); 
} 

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

你瓦里安將與ES6類的工作。