Рекомендации по использованию библиотеки React UI для React Hooks - PullRequest
Новая
       15

Рекомендации по использованию библиотеки React UI для React Hooks

1 голос
/ 20 апреля 2020

Эй, я создаю библиотеку React UI с повторно используемыми компонентами. Все компоненты являются функциональными компонентами.

Я использую сборник рассказов для представления компонентов.

У меня вопрос к таким компонентам, как формы, кнопки переключения, поля выбора и раскрывающиеся списки.

Каков наилучший способ создания таких компонентов многократного использования? потому что вы должны иметь возможность получать значения или, например, логическое значение, если кнопка переключения имеет значение true или раскрывающийся список в родительском компоненте.

Должен ли сам компонент иметь состояние? Или компонент должен быть без сохранения состояния, а родительский компонент должен управлять состоянием и функцией и передавать его моему библиотечному компоненту в качестве реквизита? Есть ли полезные примеры?

Например, мой компонент-переключатель:

Библиотечный компонент: 

import React, { FunctionComponent, useState } from 'react';

export interface IProps {
  onToggle?: (open: boolean) => void;
  onClick?: () => void;
}

const ButtonToggle: FunctionComponent<ButtonSwitchProps> = ({
  onToggle,
  onClick
}: ButtonSwitchProps) => {
  const [dropdownOpen, setDropdownOpen] = useState(false);

  const toggle = (): void => {
    setDropdownOpen(prevState => !prevState);
    if (onToggle) onToggle(!dropdownOpen);
  };

  return (
    <SwitchButtonStyle onClick={toggle}>
      {!dropdownOpen ? 'All' : 'None'}
    </SwitchButtonStyle>
  );
};

export default ButtonToggle;

И пример использования в Storybook: 

import React, { FunctionComponent } from 'react';
import { action } from '@storybook/addon-actions';
import ButtonToggle from './ButtonToggle';

export default {
  component: ButtonToggle,
  title: 'ButtonToggle',
};

export const Toggle: FunctionComponent = () => {
  return (
    <ButtonToggle onToggle={action('onToggle')} />
  );
};

Я использую функцию onToggle в родительском. действие Аддон показывает логическое значение в сборнике рассказов. Лучший и эффективный способ использования библиотеки пользовательского интерфейса многократного использования - это использование состояния в родительском компоненте, не так ли? Таким образом, библиотека пользовательского интерфейса имеет компоненты без сохранения состояния, и когда вы используете библиотеку, вы должны управлять состояниями.

Я надеюсь, что кто-то может дать мне советы и, возможно, пример для некоторых из перечисленных компонентов, особенно сложного многократно используемого выпадающего компонента , Большое вам спасибо.

...