React Hook的React UI库最佳实践

Question

嘿，我正在创建一个具有可重用组件的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;

以及故事书中的示例用法：

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函数。动作Addon在故事书中显示了布尔值。对于可重用的UI库，更好的工作方式是在父组件中使用状态，不是吗？因此，UI库具有无状态组件，当您使用该库时，必须控制状态。

我希望有人给我一些建议，也许可以列举一些列出的组件的示例，尤其是复杂的可重用下拉菜单组件。非常感谢。

Answer 1

我建议您将组件设为controlled（即，从父级传递状态）。原因之一是，假设您拥有TextField组件来维护内部状态-例如value。

现在，有人想使用它，问题来了，他如何将初始的value传递给它？

通过作为道具？精细。但是，如果使用您的TextField的父母希望将另一个value传递给您的TextField（即value已在父母中更新），现在您必须使内部状态value与传递的value。因此，这意味着value的TextField现在有两个事实来源（一个是从父母那里传来的，另一个是用户输入的）。如您所见，here有时很难管理。