Действия сборника рассказов - что именно они называют? - PullRequest
Новая
       8

Действия сборника рассказов - что именно они называют?

6 голосов
/ 30 марта 2019

Я немного новичок в 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')

Что конкретно означает этот конец действия? Как бы я снова заселил карты подряд?

Извините, если это основной вопрос, я, честно говоря, не стал бы его задавать, если бы не пытался выяснить сборники рассказов в течение пары дней.

Ответы [ 3 ]

0 голосов
/ 02 апреля 2019

На самом деле action('end') - это просто обработчик действия (а также action('swipe left') или action('swipe right')), который вызывается для определенного события (onEnd).Взгляните на https://alexandre -garrec.github.io / реагировать-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 какой-либо кнопки).

0 голосов
/ 02 апреля 2019

Хорошо, как сказал бы Джек, давайте разберемся по частям.Прежде всего:

Мне бы хотелось объяснить, как работают сборники рассказов

storybook-actions - это дополнение к платформе Storybook.Действия предоставляют вам механизм, который регистрирует взаимодействия пользователя и данные по мере их прохождения через ваши компоненты в пользовательском интерфейсе Storybook.action() на самом деле high-order function, который возвращает другую функцию, аналогичную console.log(), единственное отличие здесь состоит в том, что помимо регистрации активности пользователя и выполнения других операций, имя действия (end, swipe-left, ...) также будет отображаться на панели действий вашей сборника рассказов.

Функции обработчика событий, которые создает action(), полезны для замены реальных функций обработчиков событий, которые вы передаете своим компонентам.В других случаях вам действительно нужно поведение обработки событий для запуска.Например, у вас есть контролируемое поле формы, которое поддерживает свое собственное состояние, и вы хотите увидеть, что происходит при изменении состояния

См. Эту статью о actions для получения дополнительной информации.

Секунда:

Идеальный ответ объяснил бы, как заставить карты повторяться после того, как пользователь закончил проходить стопку

Это на самом деле нене имеет ничего общего с действиями или даже с сборником рассказов, эта логика реализована пакетом react-swipe-card, и здесь я признаю свою некомпетентность, я даже пытался просмотреть исходный код, но он настолько беспорядочный, что почти невозможно понять, что именноПродолжая, логика, которую вы ищете, это просто carousel, который проверяет, является ли следующий элемент null или undefined и истинный случай, просто начните все сначала.Или, если предыдущий элемент равен null или undefined и регистр true, переходите к последнему элементу.Я советую вам найти другую надежную библиотеку, такую ​​как react-swipeable-views

0 голосов
/ 02 апреля 2019

Вы должны написать истории!https://www.learnstorybook.com/react/en/simple-component/

Хотя, если вы не хотите использовать сборник рассказов и заставить свою карту работать, просто вызовите определенные функции на SwipeLeft, onSwipeRight

...