NextJS中如何将URL数组转换为HTML链接？

我开发了一个NextJS应用，需要将URL数组转换为HTML链接。尝试了几种方案都遇到问题：

方案一：直接操作DOM #

代码如下：

var list = document.createElement('ul'); // Create the list element
$("body").append(list)
$('ul').attr("id", "ticketList");
$.each(yvars, function(i, yvars) {
    $("#ticketList").append("<li><a href='https://jeng.internal.com/browse/"+arr+"'  id="+arr+"_link>"+arr+"</a></li>");
})
return (
    <>
        <h1>{yname}</h1>
        <h2>{ydesc}</h2>
        <div>{list}</div>
    </>
)

出现错误（错误截图：）

方案二：通过innerHTML赋值 #

代码如下：

for (let i = 0; i < yvars.length; i++) {
    result = result + " <a href='" + yvars[i] + "'>" + "Technique " + alf[i] + "</a><br>";
}
document.getElementById('results').innerHTML = result

return (
    <>
        <h1>{yname}</h1>
        <h2>{ydesc}</h2>
        <div id='results'></div>
    </>
)

同样出现错误（错误截图：）

方案三：直接返回拼接的字符串 #

代码如下：

for (let i = 0; i < yvars.length; i++) {
    result = result + " <a href='" + yvars[i] + "'>" + "Technique " + alf[i] + "</a><br>";
}

return (
    <>
        <h1>{yname}</h1>
        <h2>{ydesc}</h2>
        {result}
    </>
)

页面将链接显示为纯文本（显示效果截图：）

请问正确的实现方式是什么？

在NextJS/React中，要利用JSX特性直接渲染元素，避免操作DOM或拼接HTML字符串——前者会因组件挂载时机问题报错，后者会被React自动转义为纯文本。

方法一：渲染为无序列表 #

适合需要列表展示的场景：

export default function YourComponent({ yname, ydesc, yvars, alf }) {
  return (
    <>
      <h1>{yname}</h1>
      <h2>{ydesc}</h2>
      <ul>
        {yvars.map((url, index) => (
          <li key={index}>
            <a href={url} target="_blank" rel="noopener noreferrer">
              Technique {alf[index]}
            </a>
          </li>
        ))}
      </ul>
    </>
  );
}

方法二：渲染为换行的独立链接 #

不需要列表结构时可以用这种方式：

export default function YourComponent({ yname, ydesc, yvars, alf }) {
  return (
    <>
      <h1>{yname}</h1>
      <h2>{ydesc}</h2>
      <div>
        {yvars.map((url, index) => (
          <div key={index}>
            <a href={url} target="_blank" rel="noopener noreferrer">
              Technique {alf[index]}
            </a>
          </div>
        ))}
      </div>
    </>
  );
}

关键说明 #

• 用map遍历数组直接生成JSX元素，React会自动转换为对应HTML。
• 每个遍历生成的元素需添加唯一key属性，帮助React优化渲染性能。
• 外部链接建议添加target="_blank"和rel="noopener noreferrer"，避免安全风险。

内容的提问来源于stack exchange，提问作者Tennis Smith