Javascript 使用可重用组件组织Reaction项目的最佳方式是什么

我现在正在做一个react 计划.我没有直接的导师，所以我不知道我的方向是否正确.

对于我的应用程序，我希望使用尽可能多的可重用组件.

目前，组件的文件夹是按类别/视图组织的

例如，我有一个按钮文件夹，它围绕着十个按钮(删除、发送、更改语言、下一步...).

here is the structure of my code at the moment :个

我的标题中有多个按钮的一部分

import { Refuse } from 'components/buttons/Refuse';
import { Validate } from 'components/buttons/Validate';

export const Header = () => {

return (
<>
 <Refuse
      offerData={offerData}
      setValue={setValue}
      onSubmit={onSubmit}
      register={register}
      watch={watch}
            />
          )}{' '}
 <Validate
      register={register}
      setError={setError}
      offerData={offerData}
      setValue={setValue}
      watch={watch}
      clearErrors={clearErrors}
          />
</>
)}

然后在文件夹"components/button"中创建用于验证按钮的文件

import { Button } from '@mui/material';
import React, { useState } from 'react';
import { setActiveButton } from '../../features/buttons.slice';
import { useDispatch, useSelector } from 'react-redux';
import { AdminValidation } from '../popup/AdminValidation';

export const Validate = ({
  offerData,
  setError,
  watch,
  setValue,
  clearErrors,
  register,
}) => {
  const dispatch = useDispatch();
  const isLoading = useSelector((state) => state?.orders.loading);
  const userRole = useSelector((state) => state.user?.userGroup);
  const [ValidatePopup, setValidatePopup] = useState();

  return (
    <>
      {userRole?.includes('1') && userRole?.includes('3') ? (
        <Button
          disabled={
            offerData?.Status === 1 ||
            offerData?.Status === 3 ||
            offerData?.Status === 4
          }
          variant="contained"
          type={
            (offerData?.Paiement === 'Classique' ||
              offerData?.Paiement === 'Visa') &&
            offerData?.Status === 2
              ? 'button'
              : 'submit'
          }
          onClick={() => {
            if (
              (offerData?.Paiement === 'Classique' ||
                offerData?.Paiement === 'Visa') &&
              offerData?.Status === 2
            ) {
              setValidatePopup(true);
            } else {
              dispatch(setActiveButton('Valider'));
            }
          }}
        >
          {isLoading ? <> Chargement</> : <> Valider</>}
        </Button>
      ) : (
        <Button
          disabled={
            isLoading ||
            (userRole?.includes('1') && offerData?.Status !== 0) ||
            (userRole?.includes('2') && offerData?.Status !== 1) ||
            (userRole?.includes('3') && offerData?.Status !== 2)
          }
          variant="contained"
          type={
            (offerData?.Paiement === 'Classique' ||
              offerData?.Paiement === 'Visa') &&
            offerData?.Status === 2
              ? 'button'
              : 'submit'
          }
          onClick={() => {
            if (
              (offerData?.Paiement === 'Classique' ||
                offerData?.Paiement === 'Visa') &&
              offerData?.Status === 2
            ) {
              setValidatePopup(true);
            } else {
              dispatch(setActiveButton('Valider'));
            }
          }}
        >
          {isLoading ? <> Chargement</> : <> Valider</>}
        </Button>
      )}
      <AdminValidation
        setError={setError}
        register={register}
        setValue={setValue}
        ValidatePopup={ValidatePopup}
        setValidatePopup={setValidatePopup}
        watch={watch}
        clearErrors={clearErrors}
      />
    </>
  );
};

和一个用于拒绝按钮的文件夹

import { Button } from '@mui/material';
import React from 'react';
import { setActiveButton } from '../../features/buttons.slice';
import { useDispatch, useSelector } from 'react-redux';
import { FormDialog } from '../popup';
import { setOpen } from '../../features/popup.slice';

export const Refuse = ({ register, watch, setValue, offerData, errors }) => {
  const dispatch = useDispatch();
  const isLoading = useSelector((state) => state?.orders.loading);
  const userRole = useSelector((state) => state.user?.userGroup);

  return (
    <>
      <Button
        disabled={
          isLoading ||
          (userRole?.includes('1') &&
            userRole?.includes('3') &&
            offerData?.Status !== 0) ||
          (userRole?.includes('1') &&
            userRole?.includes('3') &&
            offerData?.Status !== 2) ||
          (userRole?.includes('1') &&
            !userRole?.includes('2') &&
            offerData?.Status !== 0) ||
          (userRole?.includes('2') &&
            !userRole?.includes('1') &&
            offerData?.Status !== 1) ||
          (userRole?.includes('3') && offerData?.Status !== 2)
        }
        variant="text"
        type="button"
        onClick={() => {
          dispatch(setOpen(true));

          dispatch(setActiveButton('Refuser'));
        }}
      >
        {' '}
        {isLoading ? <> Chargement</> : <> Refuser</>}
      </Button>{' '}
      <FormDialog
        offerData={offerData}
        register={register}
        watch={watch}
        setValue={setValue}
        errors={errors}
      />
    </>
  );
};

I was thinking of deleting all these files to create only one component, called 'button' which I would reuse for each action as below:个

我的可重复使用按钮将如下所示

import { Button } from '@mui/material';

export const ButtonComponent = ({ type, style, action, texte, ...props }) => {
  return (
    <Button type={type} onClick={action} {...props}>
      {texte}
    </Button>
  );
};

我的页眉页面将调用可重用按钮

import { Refuse } from 'components/buttons/Refuse';
import { Validate } from 'components/buttons/Validate';

export const Header = () => {

return (
<>
  <> <ButtonComponent
                disabled={
                  isLoading ||
          (userRole?.includes('1') &&
            userRole?.includes('3') &&
            offerData?.Status !== 0) ||
          (userRole?.includes('1') &&
            userRole?.includes('3') &&
            offerData?.Status !== 2) ||
          (userRole?.includes('1') &&
            !userRole?.includes('2') &&
            offerData?.Status !== 0) ||
          (userRole?.includes('2') &&
            !userRole?.includes('1') &&
            offerData?.Status !== 1) ||
          (userRole?.includes('3') && offerData?.Status !== 2)
                }
                action={() => {
           dispatch(setOpen(true));

          dispatch(setActiveButton('Refuser'));}
                type={'button'}
                texte={isLoading ? langue?.loading : langue?.refused}
                variant="text"
              />
         <FormDialog
    offerData={offerData}
    register={register}
    watch={watch}
    setValue={setValue}
    errors={errors}
  /></>


          <ButtonComponent
            //same here but for validate
          />
</>
)}

问题是，调用按钮的页面最终会有更多的导入、更多的代码行.

所以我最终想知道，做这件事最好的方法是什么？