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

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


哈士奇WWW
浏览 105回答 1
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}/>主要思想是确定最可重用的组件,以便您能够在整个应用程序中重用它们。参见组合与继承,在反应中思考
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript