javascript - 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 语句。或者，您可以更改外部(和)to {，}如下所示以暗示一个功能。我通常这样做是为了在我的所有箭头函数中具有一致的格式。

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;