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

Question

我正在尝试在 JSX 表达式中连接字符串和 HTML，但我似乎无法正确执行此操作。我的渲染函数中的代码如下所示:

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

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

它实际渲染的是“Other string [object Object]”

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

Answer 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>