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

嘿，我的组件变得越来越大，我想把一些代码存储在另一个文件中，而不制作新的组件。基本上，我只想逐字复制我的代码。比如说

<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>

选择模型类型
{allModelTypes.map（（modelType，index）=>(
{modelType}
))}
{errors.modelType&&此字段是必需的}
姓氏{index}：
去除

---

正如您在这里看到的，我的组件的这一部分非常依赖于该组件中的状态，因此我不能将其拆分为另一个组件，因为我将丢失我的状态。理想情况下，我希望将此代码存储在一个单独的文件中，并使用该文件将代码插入到我的主组件中

React的主要设计原则之一是

您不能只是将代码“复制”到另一个文件中，您需要从中生成一个组件

代码如下：

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

{allModelTypes.map（（modelType，index）=>(
{modelType}
))}

可能成为：

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

//SelectModels.js
const SelectModels=（{name，innerRef，types}）=>(
{types.map（（类型，索引）=>(
{type}
))}
);
导出默认模型；
//用法
从“./SelectModels.js”导入SelectModels

其主要思想是确定最可重用的组件，以便您能够在整个应用程序中重用它们

---

请参见，

您可以将状态作为道具传递给另一个组件