时间戳

首页 > 解决方案 > 在 React 中重用组件逻辑

javascript - 在 React 中重用组件逻辑

问题描述

我有一个更一般/概念性的问题 - 在 React 中，如何创建一个可以构建的组件。让我解释：

假设我们有一个和 在其中我们有,和<PersonalInfo.jsx/>的文本字段。该应用程序可供平民和警察使用。如果它被警察使用，我们还希望在和之间有一个字段。医生也可以使用它，在这种情况下，我们需要在和之间添加一个字段。一种方法是复制所有内容（呃！）。另一种方法是使用 HOC，但我不知道该怎么做。还有其他想法吗？nameageaddressdepartment numberageaddressspecializationnameage<PoliceOfficerPersonalInfo.jsx/>

标签： javascriptreactjs

解决方案

您可以使用许多方法，但我只会将组件创建为 CommonTextFields 并用于重复部分。即使您有一定程度的代码重复，它也更具可读性和可维护性。

const PageA = () => {
  // do your validation and fetch logic here

  return (
    <>
      <CommonFields age={age} name={name} value={address} />
      <FieldA value={fieldA} />
    </>
  );
};

const PageB = () => {
  // do your validation and fetch logic here

  return (
    <>
      <CommonFields />
      <FieldB />
    </>
  );
};

但是，如果您坚持非渲染部分（验证/获取逻辑等）也不要重复（我认为这是个坏主意，因为它会破坏可维护性）。有 HOC 和 renderProps 选项；您也可以使用 customHooks 来支持这一点。但是在这种情况下，您需要找到一种方法来包含不重复部分的获取和验证逻辑。

// Really looks so messy and not scalable
// Yhis is only one field, imagine for array of fields
const CommonFieldsHOC => ( Field, fieldName, validationFunc ) => ( props ) => {

  const [extraField, setExtraField] = useState()
  const commonValidation = () => {}

  // Find a way to include extraFields logic to validation and Fetch
  handleSubmit = () => {
    const isCommonFieldsValid = commonValidation()
    const isFieldValid = validationFunc(extraField)
    if(isFieldValid && isCommonFieldsValid) {
      submitFunction({ name, age, address,
        [fieldName]: extraField
      })
    } else {
      // give some warning
    }
  }

  return (
    <>
      <Name value={name} />
      <Age value={age} />
      <Address value={address} />
      <Field value={extraField} onChange={extraField} />
      <Button onClick={handleSubmit}>
    </>
  )
};

并像这样使用它：

const MyExtraField = () => <MyExtraField />
const validateMyExtraField = (value) => value > 0 

const MyForm = CommonFieldsHOC(MyExtraField, 'MyExtraField', validateMyExtraField )

const Page = () => {
  return <>
    <MyForm />
  </>
}

推荐阅读