在 React 中重用組件邏輯

Question

我有一個更一般/概念性的問題 - 在 React 中，一個 go 如何創建一個可以構建的組件。 讓我解釋：

假設我們有一個<PersonalInfo.jsx/> ，其中我們有name 、 age和address的文本字段。 該應用程序可供平民和警察使用。 如果它被警察使用，我們還希望在age和address之間有一個現場department number 。 醫生也可以使用它，在這種情況下，我們需要在name和age之間添加一個specialization字段。 一種方法是擁有一個<PoliceOfficerPersonalInfo.jsx/>並復制所有內容（呃。）。 另一種方法是使用 HOC，但我不知道如何准確了解 go？ 還有其他想法嗎？

Answer 1

我看不出高階組件如何/可以幫助解決這個問題，因為 HOC 實際上只能注入道具和行為，但它們不能 go 並更改 UI，即 JSX。

React 在設計時考慮了組合，因此您應該抽象地考慮構成“PersonalInfo”組件的 UI 元素，即可以創建哪些較小的構建塊組件來組合較大的組件。 根據您提供的內容，我猜您有一組字段/屬性，這些字段/屬性放在一起代表一個人的“個人信息”。

從這里你 go 幾個方向之一：

1. 使用較小的構建塊組件構建不同的相似組件，這些組件恰好共享許多相似的 UI 元素，即您的PersonalInfo和PoliceOfficerPersonalInfo組件。 優點是每個組件都有一個特定的用途，但缺點是如果需要更新多個組件共有的任何字段，您可能需要全部跟蹤它們（如果組合構建塊設計良好，則可以減輕）。
2. 創建一個通用的“個人信息”容器，用於顯示一組特定的信息，並公開道具以有條件地呈現額外的字段。 專業人士：一個單一的組件，但缺點就是我所說的道具蠕變，如果沒有正確修飾/維護可能會失控，你最終會得到一個可以完成所有事情的整體組件（也許很好，也許不太好）。
3. 創建一個包裝容器來控制總體布局，但通過children屬性呈現子級。 這里的優點是您獲得了要放入 UI 的容器，並在設計時決定要顯示哪些子項。 將其視為一個超級 div，即<PersonalInfo>{props.children}</PersonalInfo> 。 一個缺點可能是您沒有一個預制的專用組件，只是在某個地方拍打。

Answer 2

您可以使用許多方法，但我只會將組件創建為 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 />
  </>
}

Answer 3

您可以添加Boolean以顯示或隱藏組件中的特定信息，以便您可以重復使用它。