如何在 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

  name={`${fieldName}.modelType`}

  required

  ref={register({ required: true })}

>

  {allModelTypes.map((modelType, index) => (

    <option key={index}>{modelType}</option>

  ))}

</select>

可能成为：

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

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

参见组合与继承，在反应中思考