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

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

有沒有更好的方法將 div 動態添加到現有元素?

有沒有更好的方法將 div 動態添加到現有元素?

蝴蝶刀刀 2022-12-18 16:27:29
作為實現電子郵件應用程序的一部分,我試圖從 API 加載所有電子郵件并將它們顯示給用戶。我通過運行一個 forEach 循環來實現這一點,在該循環中我創建了一個電子郵件元素,填寫相關詳細信息并將其附加到容器中。然后將容器附加到現有視圖。是否有更優化(更快、更清潔)的方法來實現這一點,通過使用 vanilla JS 或 React?fetch(`/emails/${mailbox}`)  .then(response => response.json())  .then(emails => {    var enc = document.createElement('div');    enc.className = "enc";        emails.forEach(element => {      let name = document.createElement('div');      name.className = "name";      name.innerHTML = element.sender;      let subject = document.createElement('div');      subject.className = "subject";      subject.innerHTML = element.subject;      let timestamp = document.createElement('div')      timestamp.className = "timestamp";      timestamp.innerHTML = element.timestamp;      let container = document.createElement('div');      container.className = "email-container";      container.appendChild(name);      container.appendChild(subject);      container.appendChild(timestamp);      enc.appendChild(container);    });    document.getElementById('emails-view').appendChild(enc)});
查看完整描述

1 回答

?
嚕嚕噠

TA貢獻1784條經驗 獲得超7個贊

既然你使用的是 React,就沒有理由使用 JS 原生的 DOM 方法來進行 DOM 操作。利用 React 的 jsx 語法。


這是您編寫為組件的示例,該組件在組件初始化時加載數據:


function EmailViewComponent() {

  const [emails, setEmails] = useState([])


  useEffect(() => {

    const apiCall = fetch(`/emails/${mailbox}`)

      .then(response => response.json())

      .then(emails => {

        setEmails(emails)

      });

  }, [])


  return (

    <div className="emails-view">

      <div className="enc">

        {emails.map(emailItem => (

          <div className="email-container">

            <div className="name">{emailItem.sender}</div>

            <div className="subject">{emailItem.subject}</div>

            <div className="timestamp">{emailItem.timestamp}</div>

          </div>

        ))}

      </div>

    </div>

  )

}

通過這種方式,您將能夠更輕松、更清潔地維護應用程序。


至于性能,我不確定哪個更快,但我總是會以方便編寫更清晰的代碼作為權衡。


但我相信 React 團隊會關注性能。


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

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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