如何使用普通的Javascript函数呈现多个HTML部分

Question

这是一个有数百页的静态网站。我需要呈现诸如topnav或新闻通讯或内容带之类的元素，并定期从JS更改这些内容。

这是我尝试过的：

const components = {
  compartirEnFlex: `<h4>Newsletter</h4>`,
  newsletterEs: `<h4>Compartir</h4>`,
}


const ids = ['newsletterEs', 'compartirEnFlex', 'infoArticulo', 'infoDeLaWebEnFlexIzq']

function renderComponents(objWithComp, idsArr){
  return idsArr.map(function(id){
    for(let component in objWithComp){
      let arrOfIds = Object.keys(objWithComp);
      arrOfIds.map(key => key)
      if(id === key){
        document.getElementById(id).insertAdjacentHTML('afterbegin', objWithComp[id])
      }
    }    
  })
}
renderComponents(components, ids);

每个id在HTML结构中都有对应的内容。当我单独执行此操作时，它将起作用。但是，我必须以一种优雅的方式来处理这个问题（在这个项目中，像React这样的JS框架是不可能的）。

感谢您的帮助！

Answer 1

[运行代码时，您会在控制台中看到错误Uncaught ReferenceError: key is not defined。

这是因为key中的if(id === key)未定义。 arrOfIds.map(key => key)行返回与arrOfIds相同的精确数组，因为Array.prototype.map“返回一个新数组，其中填充了对调用数组中每个元素调用提供的函数的结果。”

这里，您没有将新数组分配给变量，所以什么也没有发生。即使是这样，该新数组也将是Array.prototype.map的副本，因为映射函数arrOfIds对于每个(key) => key都会返回key，这意味着输出与输入相同。

---

但是，这不是问题。如果我正确理解了您的问题，那么key应该显示您要完成的任务的示例。如果那是您想要实现的，那么这里是一个解决方案：

首先，您不需要在this demo内的component中迭代objWithComponent-您已经在idArr中进行了此操作。您也不需要idArr数组，因为您可以使用ids从components对象中获取组件的键。

假设您的HTML看起来像这样：

Object.keys()
然后，使用Object.keys()获取所拥有组件的ID的数组，您可以将其映射到HTML标签。实际上，这里不需要<div>
  <div id="newsletterEs"></div>
  <div id="compartirEnFlex"></div>
  <div id="infoArticulo"></div>
  <div id="infoDeLaWebEnFlexIzq"></div>
</div>
，因为Object.keys(components) 返回新数组

，并且除非以后需要该数组，否则没有理由使用Object.keys(components)。相反，您可以使用map。

这是下面的样子：

map
然后，当您调用map时，您可以仅传递Object.prototype.forEach参数，并且仅使用Object.prototype.forEach语句呈现具有相应ID的div的组件。