Question

我对React还是有些陌生，我正在尝试做一种刷卡机制。

我正在使用该库：

https://www.npmjs.com/package/react-swipe-card

我基本上创建了一个演示组件：

import React, { Component } from 'react'
import Cards, { Card } from 'react-swipe-card';
import { action } from '@storybook/addon-actions';
import addons, { mockChannel } from '@storybook/addons';

addons.setChannel(mockChannel());

const data = ['Alexandre', 'Thomas', 'Lucien']

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

export default Wrapper;

但是我对Storybooks不太熟悉-我一直在阅读它，这对我来说意义不大。

例如，当所有卡片都用完后，我想将它们洗牌并再次显示。

现在，执行的唯一“动作”是“结束”，无论执行什么操作：

onEnd={action('end')

此操作结束到底要调用什么？我将如何再次重新填充卡？

很抱歉，如果这是一个基本问题，老实说，如果我几天前都没有尝试过找出故事书，我不会问过。

Answer 1

您需要写故事！ https://www.learnstorybook.com/react/en/simple-component/

尽管，如果您不想使用故事书并使卡片正常工作，只需调用onSwipeLeft，onSwipeRight的特定功能

Answer 2

实际上action('end')只是一个在特定事件（action('swipe left')）上调用的动作处理程序（以及action('swipe right')或onEnd）。在页脚中查看https://alexandre-garrec.github.io/react-swipe-card/和ACTION LOGGER。

文档（非常差）不知道onEnd在此库中的确切功能，但是，正如我在源代码中所看到的那样，此功能（如果作为道具传递）是在取出卡时调用的如果已移除卡的计数器等于卡总数（https://github.com/alexandre-garrec/react-swipe-card/blob/master/src/Cards.js，第23行）。我认为这是打算在刷完所有卡后进行的操作，例如显示警报或其他内容。

如果我对您的理解正确，那么该组件没有可用的重置方法。所有可用功能均通过以下示例作为演示提供：https://github.com/alexandre-garrec/react-swipe-card/blob/master/stories/index.js

在实际应用中（不是故事），您仍然可以尝试将用于渲染卡的数据置于组件状态，并在需要时将其重置（例如，通过某个按钮的onClick调用其重置））。

Answer 3

好吧，正如杰克曾经说过的，让我们分手。首先：

我想解释一下故事书动作的工作原理

storybook-actions是Storybook平台的附加组件。操作为您提供了一种机制，该机制可以记录用户交互和数据在故事书的UI中流经您的组件时的情况。 action()实际上是一个high-order function，它返回类似于console.log()的另一个函数，这里唯一的区别是，除了记录用户的活动并执行其他操作之外，动作的名称（结束，滑动-left，...）也将呈现在故事书的操作面板上。

action()创建的事件处理程序函数可用于替代将传递给组件的实际事件处理程序函数。其他时候，您实际上需要运行事件处理行为。例如，您有一个受控的表单字段，该表单字段保持其自己的状态，并且您想查看状态更改时会发生什么情况

有关actions，请参见article，以了解更多信息

第二：

一个完美的答案将解释用户完成堆叠后如何使卡片重复

这实际上与动作甚至与故事书都没有任何关系，这种逻辑是由react-swipe-card包实现的，在这里我承认自己的无能，甚至尝试通过源代码，但仅仅是如此混乱，几乎无法准确了解正在发生的事情，您正在寻找的逻辑只是一个carousel，它检查下一个元素是null还是undefined且大小写为true从头开始。或者，如果前一个元素是null或undefined，并且大小写为true，则转到最后一个元素。我建议您找到其他最可靠的库，例如react-swipeable-views

故事书动作-他们到底叫什么？

3 个答案: