Javascript 如何插入<；span>；要在“React”中渲染文本吗？

我正在使用React呈现一些段落。在这些段落中，应该有脚注的跨度。到目前为止，我得到的最好结果是它渲染了[对象]

function ArticleItem() {
  const articles = [
    {
      title: "title",
      content: [
        `Text based on this footnote <span>1</span>`,
        `Another argument, here is my source <span>2</span>`
      ]
    }
  ];

  return (
    <div className="article-container">
      <h3> {articles[i].title} </h3>
       {
        articles[i].content.map(paragraph => (
        <p>
         { paragraph }
        </p>
        )
       }    
    </div>
  );
}

函数ArticleItem（）{
常量项目=[
{
标题：“标题”，
内容：[
`基于此脚注的文本1`，
`另一个论点，这是我的来源2`
]
}
];
返回(
{文章[i].标题}
{
文章[i].content.map（段落=>(

{段落}

)
}    
);
}

因为您正在使用

“

创建字符串，而不是创建实际的

HTML元素。您使用的是名为

jsx

，它将HTML标记转换为相应的

文档。createElement（）

（或类似的，它有自己的方式）

如果希望

内容

是HTML元素而不是字符串，请创建HTML元素：

function ArticleItem() {
  const articles = [
    {
      title: "title",
      content: [
        <p>Text based on this footnote <span>1</span></p>,
        <p>Another argument, here is my source <span>2</span></p>
      ]
    }
  ];

  return (
    <div className="article-container">
      <h3> {articles[i].title} </h3>

      { articles[i].content.map(paragraph => paragraph) }
    </div>
  );
}

函数ArticleItem（）{
常量项目=[
{
标题：“标题”，
内容：[
基于本脚注1的文本，
另一个论点，这是我的来源2

]
}
];
返回(
{文章[i].标题}
{articles[i].content.map（段落=>段落）}
);
}

注意我是如何删除字符串文字（``）并创建一个HTML元素的

---

如果文章内容来自API调用，则应避免在字符串中使用HTML标记。实际上，这是一种不好的做法。始终在

render（）

调用中创建标记，并用收到的API数据填充它们。

因为您是使用

创建字符串的。”

而不是创建实际的

HTML元素。您使用的是名为

jsx

，它将HTML标记转换为相应的

文档。createElement（）

（或类似的，它有自己的方式）

如果希望

内容

是HTML元素而不是字符串，请创建HTML元素：

function ArticleItem() {
  const articles = [
    {
      title: "title",
      content: [
        <p>Text based on this footnote <span>1</span></p>,
        <p>Another argument, here is my source <span>2</span></p>
      ]
    }
  ];

  return (
    <div className="article-container">
      <h3> {articles[i].title} </h3>

      { articles[i].content.map(paragraph => paragraph) }
    </div>
  );
}

函数ArticleItem（）{
常量项目=[
{
标题：“标题”，
内容：[
基于本脚注1的文本，
另一个论点，这是我的来源2

]
}
];
返回(
{文章[i].标题}
{articles[i].content.map（段落=>段落）}
);
}

注意我是如何删除字符串文字（``）并创建一个HTML元素的

---

如果文章内容来自API调用，则避免在字符串中使用HTML标记。实际上，这是一种不好的做法。始终在

render（）中创建标记

调用并用接收到的API数据填充它们。

假设必须将

内容

数组作为原始HTML提供，一个常见的解决方案是使用prop直接呈现该HTML。您可以将其引入

元素，如下所示：

articles[i].content.map(paragraph => (
    <p dangerouslySetInnerHTML={{ __html: paragraph }} />
))

---

这里还有-希望有帮助！

假设

内容

数组必须作为原始HTML提供，一个常见的解决方案是使用道具直接呈现该HTML。您可以将其引入

元素，如下所示：

articles[i].content.map(paragraph => (
    <p dangerouslySetInnerHTML={{ __html: paragraph }} />
))

---

还有一点-希望能有所帮助！

也许可以回答您的问题Hi Moshe。我看到您的问题/被接受的答案比例很低，但您对答案的评论是“谢谢，这很有效”诸如此类。接受答案的正确方法是单击答案左侧的绿色复选框。这是必须的，必须让StackOverflow清除。好的，我下次会使用它。也许可以回答你的问题Hi Moshe。我看到你的问题/接受答案的比率很低，但你正在对答案进行评论“谢谢，它能用”之类的话。接受答案的正确方法是单击答案左侧的绿色复选框。这是StackOverflow cleanOk的必选项。我下次会使用它。