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

Question

嘿，所以我的组件变得非常大，我想将一些代码存储在另一个文件中，而不创建一个新组件。基本上，我只想逐字复制我的代码。例如

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

正如你在这里看到的，我的组件的这一部分非常依赖于这个组件中的状态，所以我不能把它分成另一个组件，因为我会失去我的状态。理想情况下，我想将此代码存储在一个单独的文件中，然后使用该文件在我的主组件中插入代码。

Answer 1

React 中的主要设计原则之一是组合。你不能只是将代码“复制”到另一个文件，你需要从它制作一个组件。代码如下：<select&nbsp; name={`${fieldName}.modelType`}&nbsp; required&nbsp; ref={register({ required: true })}>&nbsp; {allModelTypes.map((modelType, index) => (&nbsp; &nbsp; <option key={index}>{modelType}</option>&nbsp; ))}</select>可能成为：// SelectModels.jsconst SelectModels = ({ name, innerRef, types }) => (&nbsp; <select name={name} required ref={innerRef}>&nbsp; &nbsp; {types.map((type, index) => (&nbsp; &nbsp; &nbsp; <option key={index}>{type}</option>&nbsp; &nbsp; ))}&nbsp; </select>);export default SelectModels;// usageimport SelectModels from './SelectModels.js'<SelectModels name={`${fieldName}.modelType`} innerRef={register({ required: true })} types={allModelTypes}/>主要思想是确定最可重用的组件，以便您能够在整个应用程序中重用它们。参见组合与继承，在反应中思考