在 React 中重用组件逻辑

Question

I have a more general/conceptual question - in React, how does one go about creating a component that can be build upon. Let me explain:

Say we have a <PersonalInfo.jsx/> and in it we have text fields for name , age and address . The application can be used both by civilians and by police officers. If it is used by a police officer we also want to have a field department number between age and address . It can also be used by doctors and in that case we need to add a specialization field between name and age . One way is to have a <PoliceOfficerPersonalInfo.jsx/> and just duplicate everything (ugh.). Another way is to use a HOC but I can't figure out how to go about it exactly? Any other ideas?

Answer 1

I don't see how a Higher Order Component would/could help solve this issue as a HOC is really only is capable of injecting props and behavior, but they can't go and change the UI, ie the JSX.

React is designed with composition in mind, so you should think abstractly about the UI elements that make up what a "PersonalInfo" component is, ie what are the smaller building block components that can be created to compose a larger component. From what you've provided I'm guessing you have a collection of fields/properties that when taken together represent a person's "personal info".

From here you go one of few directions:

1. Use the smaller building block components to build out different similar components that just happen to share a lot of similar UI elements, ie your PersonalInfo and PoliceOfficerPersonalInfo components. Pro is each component has a single specific use, but the con is if any field that is common to multiple components needs to be updated you may need to track them all down (mitigated if compositional building blocks designed well).
2. Create a single general purpose "personal info" container that displays a specific set of information, and expose out props to conditionally render extra fields. The pro: one single component, but the con is what I call prop creep where if not properly groomed/maintained can get out of hand and you end up with a monolithic component that does everything (maybe good, maybe not so well).
3. Create a wrapper container to control the general layout, but render children via the children prop. The pro here is you get the container you want to put the UI in, and you decide at design time what children to display. Think of this as a super div, ie <PersonalInfo>{props.children}</PersonalInfo> . A con could be that you don't have a pre-fabricated specialized component lying around to just slap in somewhere.

Answer 2

There are many approaches that you can use but I would just create component as CommonTextFields and use for repeated part. It is more readable and maintable that way even though you have some level of code repeat.

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

But if you insist non render parts (validation / fetch logic etc..) to not repeat too (which is i think bad idea as it will kill maintability). There are HOC and renderProps options; also you may support this with customHooks. But in that case you need to find a way to include to the fetch and validation logic for the parts that are not repeated.

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

And use it like this:

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

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

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

Answer 3

you can add a Boolean to show or hide a specific information in the component so you can reuse it.