javascript - ForEach 不渲染多个图块
问题描述
如果有人能告诉我为什么该函数的行为与 HTML 代码在块中时的行为不同,我们将不胜感激!
解决方案
每次不更新 DOM 的速度要快得多,并且在更改渲染时不会冒此类拼写错误的风险
const render_office(entry) {
return `<div class="column tile is-3 has-text-left">
<article class='tile is-child box' style="height: 300px;">
<p class="title">${entry.location}</p>
<p><span class="has-text-weight-semibold">ID:</span> ${entry.id}</p>
<p><span class="has-text-weight-semibold">Brand:</span> ${entry.brand}</p>
<p><span class="has-text-weight-semibold">Location:</span> ${entry.location}</p>
<p><span class="has-text-weight-semibold">City:</span> ${entry.city}</p>
</article><div>`;
};
并使用
office.innerHTML = data.map(entry => render_office(entry)).join("");
推荐阅读
- angular - angular firestore 没有导出的成员 DATABASE_URL
- c# - LocalReport 在通过 Process.Start 调用时无法呈现
- c++ - 如何继承protobuf生成的C++类
- python - 显示采样率的直方图
- r - (如何)我可以使用 av 包在 R 中合并音频文件吗?
- django - 基于 SerializerMethodField 对 django 对象进行排序
- typescript - 如何循环嵌套在 TypeScript 中的对象中的对象
- python - 制作一个包含许多元素的元组列表
- javascript - 为什么 React useEffect() 卸载不改变变量值?
- amazon-sagemaker - 我们如何在 Sagemaker 中自动执行 Jupyter notebook python 脚本?