在 JS 变量中使用 HTML 标签（反应）

Question

我正在尝试查看某个用户是否在帖子中被提及。如果是这样，我想将用户名链接到个人资料。

我尝试了什么：

  if (mentions.length === 1) {
    const splitSearch = '@' + mentions[0].user.name;
    const replaceWith =
      '<a href=profile/' +
      mentions[0].user._id +
      '>@' +
      mentions[0].user.name +
      '</a>';
    newText = text.split(splitSearch).join(replaceWith);

  }

...

return (
...
{mentions.length > 0 && (
  <p id='text-container'>{newText}</p>
)}

但我只是将标签作为纯文本返回：

hi <a href=profile/5f1bd6c7d90cb03e845adbbf>@user1</a>. 
hello <a href=profile/5f30380288a63e001755401e>@user2</a>.

我是否需要以另一种方式编写replaceWith const？我尝试了Link 而不是a，但无法正常工作。

提前致谢！

Answer 1

React 只能渲染 JSX 组件。

构造一个子元素数组，而不是构造一个HTML字符串。找到提及时，将 <a>（一个 JSX 元素，而不是字符串）放入其相邻子元素之间的数组中：

const children = text.split(splitSearch);
// Insert an `<a>` between each element:
for (let i = children.length - 1; i > 0; i--) {
  const a = <a href={`profile/${mentions[0].user._id}`}>@{mentions[0].user.name}</a>;
  children.splice(i, 0, a);
}

// Then render:
{mentions.length > 0 && (
  <p id='text-container'>{children}</p>
)}

Answer 2

错了。

react 的想法不是“像您的示例那样生成自己的 html”。

您应该在 return 中使用 map（并为数组中的每个项目生成 Link），如下所示：

return (
    {
        mentions.length > 0 && (
            <p id='text-container'>
                {
                    mentions.map((m) => (
                       <Link key={m.user._id} to=`${m.user._id}`>
                         {m.user.name}
                       </Link>
                    ))
                }
            </p>
        )
    }
)