Javascript react绑定中包含JSX的呈现字符串

我发现了很多类似的问题，但没有一个能真正回答我的问题

我有一个字符串，其中包含用于创建链接的JSX模板，需要在

Text

组件中的绑定中呈现该链接。下面我有一些相同的文本，所以你可以看到我的大致内容

当前

{content}

将呈现为

此字符串具有JSX:[对象，对象]

。如何使其实际呈现

FAQLink

我尝试过的

我尝试过使用

{content}

，但运气不佳

function TooltipContent() {
 const FAQLink = () => (
  <Link
    color="teal40"
    hoverColor="teal30"
    underlined
    to={paths.resourcePage({ slug: 'frequently-asked-questions' })}
  >
    FAQ
  </Link>
 );

 const contentArray = [
  `This string has JSX: ${<FAQLink />}`,
  `Another possible string`
 ];

 let content;
 if (variant === 'risk') {
  content = contentArray[0];
 } else {
  content = contentArray[1];
 }

 return (
  <Text textAlign="left" p={2}>
    {content}
  </Text>
 );
}

函数TooltipContent（）{
常量FAQ链接=（）=>(
常见问题
);
常量contentArray=[
`此字符串具有JSX:${}`，
`另一个可能的字符串`
];
让内容；
如果（变量==‘风险’）{
content=contentArray[0]；
}否则{
content=contentArray[1]；
}
返回(
{content}
);
}

此代码确实有效，但不适用于我的案例

function TooltipContent() {
 const FAQLink = () => (
  <Link
    color="teal40"
    hoverColor="teal30"
    underlined
    to={paths.resourcePage({ slug: 'frequently-asked-questions' })}
  >
    FAQ
  </Link>
 );

 return (
  <Text textAlign="left" p={2}>
    This string has JSX: <FAQLink />
  </Text>
 );
}

函数TooltipContent（）{
常量FAQ链接=（）=>(
常见问题
);
返回(
此字符串包含JSX：
);
}

请记住，

JSX

只是React函数的糖类语法。 您的代码如下所示：

"use strict";

function TooltipContent() {
  var FAQLink = function FAQLink() {
    return React.createElement(Link, {
      color: "teal40",
      hoverColor: "teal30",
      underlined: true,
      to: paths.resourcePage({
        slug: 'frequently-asked-questions'
      })
    }, "FAQ");
  };

  var content = "This string has JSX: ".concat(React.createElement(FAQLink, null));
  return React.createElement(Text, {
    textAlign: "left",
    p: 2
  }, content);
}

因此，

concat

函数或

${}

语法只是将React元素（即

对象

）转换为

字符串

，但这会导致

[object object]

你试图以这种方式做的事情，总是会给你这个结果。

---

你能解释一下为什么你必须这样做，而你不能用另一种方式来做吗？

如果我理解正确，你想把FAQLink作为一个代码示例来呈现，如果这里是代码示例：

不幸的是，

模板文本

不能与

React

组件一起工作

但是，您可以利用

React.Fragment

来完成所需的工作，如以下示例所示：

功能工具内容（道具）{
const{variant=“default”}=props；
常量FAQ链接=（）=>；
让内容；
开关（变型）{
案例“风险”：
内容=(
风险！

);
打破
案例“无风险”：
content=“无风险”；
打破
违约：
内容=变量；
}
返回{content}
；
}

下面是一个工作示例：

---

出于好奇，为什么第二个选项“不可能”？第二个选项是正确的方法。我将更新代码示例，以便您可以看到。@goto1我更新了上面的代码示例。可以在

{content}

中显示的文本是基于传入的另一个变量的有条件的。是否有特殊原因将其存储在字符串中？例如，为什么不能像

content=我是一个茶壶？为什么它必须存储在
数组中
？谢谢！它不需要是字符串或数组<代码>内容=我是一个茶壶工作。请张贴作为一个答案，我会接受。真不敢相信我没想到。我很感激。我更新了上面的代码示例，让您更好地了解我要做的事情。看起来我可能需要重新考虑如何完成条件字符串。非常感谢您的帮助：）。请不要用链接回答。如果删除或更改了源链接，则答案将过时。你能在回答中向用户解释如何做，或者添加一个例子吗？谢谢