如何在for循环中一起使用innerHTML和ejs？

Tet 发表于 Dev

162

春节

我想使用innerHTML. 如果我不必使用innerHTML，我可以轻松地执行以下操作。

<div>
  <% for (var i = 0; i < messages.length; i++) { %>
    <p><%= messages[i] %></p>
  <% } %>
</div>

我必须innerHTML为此目的使用的原因是我的 React.js 代码被 webpack 最小化，所以我不能把 ejs 代码放在我想要的 React 代码中。为了解决这个问题，我需要放入idReact 代码，以便我可以将消息放在我想要的地方。所以我尝试了以下方法。

反应代码：

<div id="messagesGoHere"></div>

index.ejs 代码：

<script>
  <% for (var i = 0; i < messages.length; i++) { %>
    document.getElementById("messagesGoHere").innerHTML += "<p><%= messages[i] %></p>";
  <% } %>
</script>

这返回错误说

未捕获的语法错误：无效或意外的令牌

我使用 node.js、express 和 redis 来存储消息。

我很感激任何建议。

更新：

以下是我渲染messages对象的方式。

app.get('/', function (req, res) {
  // Get messages
  client.lrange('chat:messages', 0, -1, function (err, messages) {
    if (err) {
      console.log(err);
    } else {
      // Get messages
      var message_list = [];
      messages.forEach(function (message, i) {
        message_list.push(message);
      });
      // Render page
      res.render('index', { messages: message_list });
    }
  });
});

注意事项：

我在问题中提供的第一个不依赖的代码片段innerHTML完全可以正常工作，这证明我的服务器端代码是正确的。
至于<script>标签中的ejs代码，如果我不使用i变量而是0像这样使用"<p><%= messages[0] %></p>"，它成功返回了与for循环计数一样多的第一条消息，这也证明了我的服务器端代码是有效的。
问题是for 循环与 ejs 和 innerHTML 的使用。不是我的服务器端代码或任何其他代码。

春节

好吧，我在这个问题上已经完全迷失了，但终于让它起作用了。

首先，我的任何代码都没有错。

正如我最初认为的那样，以下代码片段是正确的。

<script>
  <% for (var i = 0; i < messages.length; i++) { %>
    document.getElementById("messagesGoHere").innerHTML += "<p><%= messages[i] %></p>";
  <% } %>
</script>

在我删除我的 redis 数据messages并重新创建新数据后，它起作用了。

所以我相信我的 redis 数据中有一些阻碍。

我很抱歉没有理解真正的问题。

我还要感谢所有在这篇文章中帮助过我的人。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。