在JSX表达式中连接字符串和HTML
在JSX表达式中连接字符串和HTML
提问于 2018-06-15 03:53:55
我试图在JSX表达式中连接字符串和HTML，但似乎无法正确完成。我的渲染函数中的代码如下所示：
<span>
{'preferred string' || `Other string ${<a target="_blank" href={someVariable}>text inside link</a>}`}
</span>我希望它呈现的是：“链接内的其他字符串文本”
它实际呈现的是“其他字符串对象对象”。
我已经尝试了几种不同的策略，但都没有成功。任何建议都是非常感谢的。
回答 2
Stack Overflow用户
发布于 2018-06-15 04:27:16
你想要一些类似的东西：
<span>
{'preferred string' || <p>Other string <a target="_blank" href={variable}>text inside</a></p>}
</span>关键是添加了段落标签。在你的代码中，React很难同时解释多种不同的语言。
请记住，与您给出的代码类似，此解决方案将仅在“首选字符串”为空或null时显示第二个结果，并且按原样，它是硬编码的，以具有一些值，因此or语句的后一半永远不会显示。
编辑:如果你的字符串实际上是变量，那么你需要为'other string‘再次退出，如下所示：
<span>
{ stringVariable || <p>{otherStringVariable}<a target="_blank" href={variable}>{insideTextVariable}</a></p> }
</span>Stack Overflow用户
发布于 2021-07-29 00:50:57
如果您只想将字符串与标记连接在一起，可以尝试这种简单的方法：
<>
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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50864939
复制相关文章
相似问题