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

Answer 1

因为您正在使用"<span>"创建一个字符串而不是创建实际的 <span> HTML 元素。您使用的名称为 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 数据填充它们。