react刷卡编译失败

Question

我正在进行一个项目，在该项目中，我创建了刷卡效果，并且在应用上运行npm run start:dev时编译失败

import React from 'react';
import Cards, { Card } from 'react-swipe-card'
const data = ['Alexandre', 'Thomas', 'Lucien']
const SwipeCard = () => (
return (
<Cards onEnd={action('end')} className='master-root'>
{data.map(item => 
<Card 
onSwipeLeft={action('swipe left')} 
onSwipeRight={action('swipe right')}>
<h2>{item}</h2>
</Card>
)}
</Cards>
)
);
export default SwipeCard;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

文件可以在这里找到

Answer 1

您正在为具有隐式返回的SwipeCard组件使用一个没有正文的箭头函数，因此您可以删除return语句。

const SwipeCard = () => (
<Cards onEnd={action("end")} className="master-root">
{data.map(item => (
<Card
key={item}
onSwipeLeft={action("swipe left")}
onSwipeRight={action("swipe right")}
>
<h2>{item}</h2>
</Card>
))}
</Cards>
);

Answer 2

正如@Tholle所提到的，您可以简单地删除return语句。或者，您可以将外部(和)更改为{和}，如下所示，以表示函数。我这样做通常是为了在我的所有箭头函数中具有一致的格式。

import React from 'react';
import Cards, { Card } from 'react-swipe-card'

const data = ['Alexandre', 'Thomas', 'Lucien']
const SwipeCard = () => {
return (
<Cards onEnd={action('end')} className='master-root'>
{data.map(item => 
<Card 
onSwipeLeft={action('swipe left')} 
onSwipeRight={action('swipe right')}>
<h2>{item}</h2>
</Card>
)}
</Cards>
)
};
export default SwipeCard;