如何在反应中将单个组件代码拆分为多个文件

Question

Hey so my component is getting really large and I want to store some of the code in another file without making a new component. Basically I just want my code replicated word for word. For example

<fieldset className="container-form__field" name={fieldName} key={fieldName}>
  <label>Select Model Type</label>
  <select
    name={`${fieldName}.modelType`}
    required
    ref={register({ required: true })}
  >
    {allModelTypes.map((modelType, index) => (
      <option key={index}>{modelType}</option>
    ))}
  </select>
  {errors.modelType && <span>This field is required</span>}

  <label>
    Last Name {index}:
    <input type="text" name={`${fieldName}.lastName`} ref={register} />
  </label>

  <button type="button" onClick={removeModel(index)}>
    Remove
  </button>
</fieldset>

As you can see here this part of my component is very dependant on the state inside this component so I can't just split it up into another component as I'll lose my state. Ideally, I want to store this code in a separate file and just use that file to insert the code in my main component.

Answer 1

One of the main design principles in React is Composition .

You can't just "replicate" code to another file, you need to make a component from it.

Code like this:

<select
  name={`${fieldName}.modelType`}
  required
  ref={register({ required: true })}
>
  {allModelTypes.map((modelType, index) => (
    <option key={index}>{modelType}</option>
  ))}
</select>

May become:

// SelectModels.js
const SelectModels = ({ name, innerRef, types }) => (
  <select name={name} required ref={innerRef}>
    {types.map((type, index) => (
      <option key={index}>{type}</option>
    ))}
  </select>
);

export default SelectModels;

// usage
import SelectModels from './SelectModels.js'
<SelectModels name={`${fieldName}.modelType`} innerRef={register({ required: true })} types={allModelTypes}/>

The main idea is to identify the most re-usable components, so you will able to reuse them across the application.

See Composition vs Inheritance , Thinking in React