反应刷卡编译失败

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>

可以找到文档here

Answer 1

您正在为具有隐式 return 的 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;

反应刷卡编译失败

react swipe card failed to compile

javascript

node.js

reactjs

react-swipeable-views