亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 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貢獻1864條經驗 獲得超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}/>

主要思想是確定最可重用的組件,以便您能夠在整個應用程序中重用它們。

參見組合與繼承,在反應中思考


查看完整回答
反對 回復 2022-09-23
  • 1 回答
  • 0 關注
  • 120 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號