Reactjs React UI库React钩子的最佳实践

嘿，我正在创建一个带有可重用组件的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, 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，useState}来自'React'；
导出接口IProps{
onToggle？：（打开：布尔）=>void；
onClick？：（）=>void；
}
常量按钮切换：函数组件=({
格洛格，
onClick
}：按钮开关道具）=>{
const[dropdownOpen，setDropdownOpen]=useState（false）；
常量切换=（）：无效=>{
setDropdownOpen（prevState=>！prevState）；
如果（onToggle）onToggle（！dropdownOpen）；
};
返回(
{！dropdownOpen？'All'：'None'}
);
};
导出默认按钮切换；

以及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')} />
  );
};

import React，{FunctionComponent}来自“React”；
从“@storybook/addon actions”导入{action}；
从“./ButtonToggle”导入ButtonToggle；
导出默认值{
组件：按钮切换，
标题：'按钮切换'，
};
导出常量切换：FunctionComponent=（）=>{
返回(
);
};

我在父级中使用onToggle函数。action插件在storybook中显示布尔值。对于可重用UI库来说，更好、更有效的方法是在父组件中使用状态，不是吗？因此，UI库具有无状态组件，当您使用该库时，必须控制状态

---

我希望有人能给我一些TIPP，也许还有一些列出的组件的例子，特别是一个复杂的可重用下拉组件。非常感谢。

我最近也走了一条类似的道路：我的收获是您可以在库组件中使用状态，但您需要小心，应该在effects中调用回调。如果你想交流知识，请毫不犹豫地与我联系。我最近走了一条类似的道路：我的收获是你可以在你的库组件中使用状态，但你需要小心，应该在effects中调用回调。如果你想交流知识，请随时与我联系。