javascript - 集成和渲染 react-swipe-cards

Question

我对 reactJs 很菜鸟，事实上我刚刚完成 this course并且正在为这里的一些概念而苦苦挣扎。

我愿意为人们创建一个应用程序来表达他们对时事通讯主题的偏好，并且已经抓取了一个非常全面的主题列表 (2k+) 并且想以一些有趣的方式来选择它们，所以我认为类似于 Tinder 可刷卡的东西将是一个完美的选择，所以我正在尝试实现 this react module将功能添加到我的应用程序中。

但它没有显示任何内容。

我只是created a Repo ，其中我进行了几次尝试，但都没有成功。

基本上，模块文档中提供的示例说它应该以

开始

const data = ['Alexandre', 'Thomas', 'Lucien', 'Raphael', 'Donatello', 'Michelangelo', 'Leonardo']


const Wrapper = () => {
  return (
      <Cards onEnd={console.log("action('end')")} className='master-root'>
        {data.map(item => 
          <Card 
            onSwipeLeft={console.log("action('swipe left')")} 
            onSwipeRight={console.log("action('swipe right')")}>
            <h2>{item}</h2>
          </Card>
        )}
      </Cards>
  )
}

但我完全迷失了它，我认为它应该为我提供一个 React 组件 <Something /> ，而是它在函数的行中生成一些东西，返回一个 div ，这看起来有很多组件，但我不知道如何集成到这个例子中。

---

注意:在 repo 图中，我注意到还有另一个 developer进行了一些调整以使其与 React 16.xx.beta 兼容，我也尝试过，也不走运。

我几乎可以肯定，我在这里遗漏了一些概念，因此，我们也非常欢迎任何引用。

Answer 1

你要找的是功能性无状态组件，如下代码

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

是一个功能组件。

根据 documentation

Functional and Class Components

The simplest way to define a component is to write a JavaScript function:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

This function is a valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element. We call such components “functional” because they are literally JavaScript functions.

渲染函数组件的方式就像渲染普通的 React 组件一样

<Wrapper {...props} />  // {...props} is a spread operator syntax to just pass all the props down to wrapper you can pass selected props too

此外，react-swipe-card 不为您提供 Wrapper 功能组件，它为您提供 Cards 和 Card 等组件 用于在 Wrapper Component

中呈现卡片 View

从'react-swipe-card'导入卡片，{Card}现在在你的情况下它看起来像

export default class MyCards extends Component {

  render() {
    return <Wrapper />;
  }
}

但是因为你没有状态而且你没有使用生命周期函数你可以简单地将上面的 MyCards 组件写成

export const MyCards= () => {
    return <Wrapper />;
}

然而，我假设您最终会在那里编写一些逻辑，因此将其保留为有状态的 React 组件。我还包含了您可以处理左侧状态更改或写入滑动的逻辑。

Check a working DEMO

附言我建议彻底阅读 React 文档，因为它们已经很好地解释了这些概念