Storybook Actions - 他们到底叫什么？

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 - 我一直在阅读它，但对我来说不太明白。

比如所有的牌都打完后，我想洗牌再展示。

现在，唯一执行的 "action" 是 "end"，不管它做什么：

onEnd={action('end')

这个动作结束调用到底是什么？我将如何重新填充卡片？

抱歉，如果这是一个基本问题，老实说，如果我没有先尝试弄清楚故事书几天，我就不会问这个问题。

Answer 1

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

文档（非常差）不知道 onEnd 在这个库中到底做了什么，但是，正如我在源代码中看到的那样，这个函数（如果作为 prop 传递）在删除时被调用如果移除的牌数等于总牌数，则为一张牌（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 2

好的，正如杰克所说，让我们分部分来。首先：

I would like an explanation of how storybook actions work

storybook-actions 是 Storybook 平台的插件。操作为您提供了一种机制，可以在用户交互和数据流经 Storybook UI 中的组件时记录用户交互和数据。 action()其实是high-order function wich returns的另一个功能，与console.log()类似，这里唯一的区别是除了记录用户的activity和执行其他操作外，动作的名称（结束、向左滑动……）也将呈现在故事书的动作面板上。

The event handler functions that action() creates are useful for as a substitute for actual event handler functions that you would pass to your components. Other times, you actually need the event handling behavior to run. For example, you have a controlled form field that maintains its own state and you want to see what happens as the state changes

查看关于 actions 的 article 了解更多信息

第二个：

A perfect answer would explain how to make the cards repeat after a user finished going through a stack

这个其实和actions甚至storybook都没有关系，这个逻辑是用react-swipe-card包来实现的，在这里我承认我的无能，我还尝试过源码，但是太乱了，几乎不可能准确理解发生了什么，你正在寻找的逻辑只是一个 carousel，它检查下一个元素是 null 还是 undefined 并且case true 只是重新开始。或者，如果前一个元素是 null 或 undefined 且大小写为真，则转到最后一个元素。我建议您找到其他最可靠的图书馆，例如 react-swipeable-views

Storybook Actions - 他们到底叫什么？

Storybook Actions - what exactly are they calling?

javascript

reactjs

storybook