javascript - 如何在 React 中插入渲染文本？

Question

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

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>
  );
}

标签： javascriptreactjs

Answer 1

因为您正在创建一个字符串，"<span>"而不是创建实际的<span>HTML 元素。您使用的是 named jsx，它将 HTML 标签转换为相应的document.createElement()（或类似的，在 React 中有它自己的方式）。

如果您希望content成为 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>
  );
}

请注意我是如何删除字符串文字 (``) 并创建一个 HTML 元素的。

如果文章内容来自 API 调用，则避免在字符串中使用 HTML 标记。这实际上是一种不好的做法。始终在render()调用中创建标签并使用您收到的 API 数据填充它们。