为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

哈士奇WWW 2022-09-23 16:29:13

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


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

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


查看完整描述

1 回答

?
慕尼黑的夜晚无繁华

TA贡献1523条经验 获得超6个赞

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

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

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


查看完整回答
反对 回复 6天前
  • 1 回答
  • 0 关注
  • 10 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信