如何在React中用Hashtag替换文本中的word？

Question

我正在开发React Card，这是一张社交媒体卡。

body包含一个Text组件，它负责显示文本：

我的组件Text如下所示：

const Text = ({ content }) => (
    <div className="mt-2 mb-4 mx-4">
        <p className="text-sm text-justify">{content}</p>
    </div>
)

我的问题是，我通过<p>显示content，而内容可以包含本应是链接的标签单词。

这是Mockup。

这就是我之前所做的：Implementation

Answer 1

基于@Bousadjra的解决方案是通过splitting content和mapping每个单词，返回一个href，其中单词以#或<p>中的普通单词开头。

const Text = ({ content }) => (
    <div className="mt-2 mb-4 mx-4">
        <p className="text-sm text-justify">
            {content.split(" ").map((str) => {
                if (str.startsWith("#")) {
                    return <a href={`/${str}`} className="text-blue-500">{str} </a>;
                }
                return str + " ";
            })}</p>
    </div>
)