故事书行动——他们到底在叫啥？

Posted 2023-02-19

【中文标题】故事书行动——他们到底在叫啥？

【英文标题】：Storybook Actions - what exactly are they calling?故事书行动——他们到底在叫什么？

【发布时间】：2019-08-21 00:55:27

【问题描述】：

我对 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;

但我对故事书不太熟悉 - 我一直在阅读它，但对我来说不太有意义。

例如，当所有的牌都打完后，我想将它们洗牌并再次展示。

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

onEnd=action('end')

这个action end 到底调用了什么？我将如何重新填充卡片？

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

【问题讨论】：

你明白为什么需要故事书吗？

@DehandeCroos - 我不知道，虽然我现在正在阅读解释。

执行此操作，暂时从您的项目中完全删除故事书。由于您是 React 新手，这会让您感到困惑。 Storybooks 是 UI 管理工具，您不会将其发送给您的客户。它旨在让您的团队与您应该遵循的 UI 风格保持同步。

【参考方案1】：

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

我想了解故事书动作的工作原理

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

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

查看articleactions 了解更多信息

第二：

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

这其实和action甚至故事书都没有任何关系，这个逻辑是由react-swipe-card包实现的，在这里我承认我的无能，我什至尝试过源头，但就是这么乱这几乎不可能准确地理解发生了什么，您正在寻找的逻辑只是一个carousel，它检查下一个元素是null 还是undefined，并且case true 只是重新开始。或者如果前一个元素是 null 或 undefined 并且 case true 转到最后一个元素。我建议您找到其他最可靠的库，例如 react-swipeable-views

【参考方案2】：

实际上action('end') 只是一个在特定事件（onEnd）上调用的操作处理程序（以及action('swipe left') 或action('swipe right')）。查看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 调用其重置）。

【参考方案3】：

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

虽然，如果您不想使用故事书并让您的卡工作，只需调用特定函数 onSwipeLeft、onSwipeRight