如何用for循环生成HTML文本？React Native场景实现

你可以通过以下两种方式实现需求：

方式一：使用for循环拼接字符串 #

const spents = [{expenseName: "Pizza"},{expenseName: "Home"}]

const generateExpenseHtml = () => {
  // 初始化空字符串存储HTML片段
  let htmlStr = '';
  // 遍历支出数组，逐个拼接h1标签
  for (const expense of spents) {
    htmlStr += `<h1>${expense.expenseName}</h1>`;
  }
  // 返回最终拼接好的HTML字符串
  return htmlStr;
}

// 调用函数得到结果，存入变量用于生成PDF
const htmlResult = generateExpenseHtml();

方式二：使用数组map+join简化代码 #

如果想更简洁，可以用数组的map方法生成每个支出对应的HTML标签，再用join把数组转成字符串：

const spents = [{expenseName: "Pizza"},{expenseName: "Home"}]

// map生成每个h1标签的数组，join(' ')用空格分隔标签，和你期望的格式一致
const htmlResult = spents.map(item => `<h1>${item.expenseName}</h1>`).join(' ');

原代码的问题说明 #

你之前的代码存在两个关键问题：

• 循环内的title变量是局部变量，每次循环都会被重新赋值，没有把所有标签拼接起来
• 函数testHtml没有返回值，调用后无法获取生成的HTML字符串

内容的提问来源于stack exchange，提问作者Albin Rdz