Question

我想使用innerHTML列出每封邮件。如果我不必使用innerHTML，我可以轻松地执行以下操作。

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

我必须为此目的使用innerHTML的原因是我有通过webpack最小化的React.js代码，所以我不能在反应代码中将ejs代码放在我想要的地方。为了解决这个问题，我需要将id放在React代码中，这样我就可以将消息放在我想要的地方。所以我尝试了以下内容。

反应代码：

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

index.ejs代码：

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

此返回错误说

未捕获的SyntaxError：无效或意外的令牌

我使用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。不是我的服务器端代码或任何其他代码。

Answer 1

将消息分配给javascript变量

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

    </script>

Answer 2

好吧，我在这个问题上完全失败了，但最终还是成功了。

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

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

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

删除messages的redis数据并重新创建新数据后，它才有用。

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

我为不理解真正的问题道歉。

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

如何在内部循环使用innerHTML和ejs？

2 个答案: