将 HTML 存储在一个变量中，以便以后在 Next JS 中使用答案

【问题标题】：Storing HTML in a variable for later use in Next JS将 HTML 存储在一个变量中，以便以后在 Next JS 中使用
【发布时间】：2019-10-21 12:06:42
【问题描述】：

在 Next JS 中，我的代码如下所示：

function Test() {
    return (
        <section>
            <div>Test</div>
        </section>
    );
}

但是假设我想在这里有多个条目，由代码生成。我本质上想用预先计算的 HTML 替换 <section> 的内容。这是我尝试过的：

function Test() {
    let posts;
    for (let i = 0; i < 3; i += 1) {
        posts += <div>Test</div>;
    }
    return (
        <section>{posts}</section>
    );
}

但是，这只会产生输出[object Object][object Object][object Object]，这不是我想要的。我试过用引号和坟墓包围 HTML，但它不起作用。我真的不知道我该怎么做才能完成这项工作。

【问题讨论】：

标签： javascript html next.js

【解决方案1】：

+ 只连接字符串；您需要使用.push() 或.map() 将元素对象存储在一个数组中。调用时会打印出整个数组的内容。

此代码将起作用：

function Test() {
    const posts = [];
    for (let i = 0; i < 3; i += 1) {
        posts.push(<div>Test</div>);
    }
    return (
        <section>{posts}</section>
    );
}

【讨论】：