集成和渲染反应刷卡

Question

我和reactJs非常相似,事实上我刚刚完成了这个课程并在这里努力学习一些概念.

我愿意为人们创建一个应用程序,以表达他们对主题通讯的偏好,并抓住一个非常全面的主题列表(2k +),并想要一些有趣的方式来选择它们,所以我认为这是沿着Tinder可刷卡的线条非常合适,所以我试图在我的App中实现这个反应模块功能.

但它没有出现任何东西.

我刚刚创建了一个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图中,我注意到有另一个开发人员进行了一些调整以使其与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>
  )
}

是一个功能组件.

根据文件

功能和类组件

定义组件的最简单方法是编写JavaScript函数:

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

此函数是一个有效的React组件,因为它接受单个"props"(代表属性)对象参数与​​数据并返回一个React元素.我们将这些组件称为"功能",因为它们实际上是JavaScript函数.

渲染函数组件的方式就像渲染普通的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 functional component,它为您提供了类似的组件Cards,Card以及您用于呈现卡片视图的组件Wrapper Component

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

export default class MyCards extends Component {

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

但是,由于您没有状态,并且您没有使用生命周期功能,因此您可以简单地将上述MyCards组件编写为

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

但是我假设你最终会在那里编写一些逻辑,从而使它成为一个有状态的React组件.我还提供了逻辑,您可以在左边处理状态更改或写入滑动.

检查正在进行的演示

PS我建议彻底浏览React文档,因为他们已经很好地解释了这些概念