时间戳

首页 > 解决方案 > 故事书行动——他们到底在叫什么？

javascript - 故事书行动——他们到底在叫什么？

问题描述

我对 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')

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

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

标签： javascriptreactjsstorybook

解决方案

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

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

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

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

有关更多信息，请参阅这篇文章actions

第二：

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

这个其实跟action甚至跟storybook都没有关系，这个逻辑是通过react-swipe-cardpackage实现的，这里我承认我的无能，我什至尝试过源码，但是就是乱七八糟，几乎看不懂到底发生了什么，您正在寻找的逻辑只是 a carousel，它检查下一个元素是否是nullorundefined和 case true 只是从头开始。或者，如果前一个元素是nullorundefined并且 case true 转到最后一个元素。我建议你找到其他最可靠的图书馆，比如react-swipeable-views

推荐阅读