在 JSX 表达式中连接字符串和 HTML

Posted 2023-02-22

【中文标题】在 JSX 表达式中连接字符串和 HTML

【英文标题】：Concatenate a string and HTML Inside JSX Expression

【发布时间】：2018-11-24 16:06:37

【问题描述】：

我正在尝试，但我似乎无法正确完成。我的渲染函数中的代码如下所示：

<span>
   'preferred string' || `Other string $<a target="_blank" href=someVariable>text inside link</a>`
</span>

我希望它呈现的是：“链接中的其他字符串文本”

它实际呈现的是“Other string [object Object]”

我尝试了几种不同的策略，但都没有运气。非常感谢任何建议。

【问题讨论】：

看看这个：***.com/questions/39523040/…

【参考方案1】：

你想要一些类似的东西：

<span>
  'preferred string' || <p>Other string <a target="_blank" href=variable>text inside</a></p>
</span>

关键是添加了段落标签。在您的代码中，React 正在努力同时解释多种不同的语言。

请记住，与您提供的代码类似，此解决方案将仅在“首选字符串”为空或 null 时显示第二个结果，并且按原样，它被硬编码为具有某些值，所以or 语句的后半部分永远不会显示。

编辑：如果您的字符串实际上是变量，那么您需要再次退出“其他字符串”，如下所示：

<span>
   stringVariable || <p>otherStringVariable<a target="_blank" href=variable>insideTextVariable</a></p> 
</span>

【讨论】：

补充一下，问题是Other string $<a target="_blank" href=someVariable>text inside link</a>是一个片段，jsx很难解析它

【参考方案2】：

如果你只想将字符串与标签连接，你可以试试这个简单的方法：

<>
    preferred string || Other string <a target="_blank" href=someVariable>text inside link</a>
</>

或者，像这样：

<span>
       'preferred string' || <span>Other string <a target="_blank" href=someVariable>text inside link</a></span>
</span>