显示带有嵌入 <Link> 的 <div> 与周围的文本内联答案

【问题标题】：display <div> with embedded <Link> inline with surrounding text显示带有嵌入 <Link> 的 <div> 与周围的文本内联
【发布时间】：2020-09-25 03:59:10
【问题描述】：

我有一些文本内容有条件地替换为使用react-string-replace 的链接（#Hashtags 和@mentions）。

这是我直接来自react-string-replace 文档的字符串替换代码。

content = reactStringReplace(content, /#(\w+)/g, (match, i) => (
                    <div className="d-inline">
                        &nbsp;
                        <Link key={match + i} to={`/hashtags/${match}`}>
                            #{match}
                        </Link>
                        &nbsp;
                    </div>
                ));

Link 是一个 react-bootstrap 组件，在这种情况下链接到匹配的主题标签。

如果没有<div> &nbsp;，主题标签将呈现没有周围空格。这也意味着两个相邻的主题标签以双倍空格呈现。

有没有办法将此 div 显示为内联文本？我试过className="d-inline"和className="d-block"

【问题讨论】：

你为什么不使用空格而不是空格，
。

标签： javascript html reactjs react-bootstrap

【解决方案1】：

这是我使用类似方法的解决方案：

.hashtag:before {
  content: " ";
}

.hashtag:after {
  content: " ";
}

<>
  Hello
  <Link className="hashtag" to={`...`}>
    #foo
  </Link>
  <Link className="hashtag" to={`...`}>
    #bar
  </Link>
  <Link className="hashtag" to={`...`}>
    #hello
  </Link>
  World
</>

这样，我们不渲染 html 实体，我们渲染空格，因此不会出现双空格，因为默认 CSS 值为 white-space: normal

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#Values

【讨论】：