在反应绑定中包含JSX的呈现字符串

Question

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

我有一个包含JSX模板的字符串，用于创建链接，并且需要在Text组件内的绑定中呈现它。下面我有一些相同的文字，所以您可以大致看到我所拥有的。

当前{content}将呈现为This string has JSX: [Object, object]。如何使其实际呈现FAQLink。

我尝试过的

我尝试使用<React.Fragment>{content}<React.Fragment>时没有运气。

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>
 );
}

此代码确实有效，但就我而言是不可能的

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>
 );
}

Answer 1

[请记住，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]”。通过这种方式，您尝试执行的操作将始终为您提供此结果。您能否解释为什么必须这样做而不能以其他方式这样做？

Answer 2

如果我理解正确，您希望将FAQLink呈现为代码示例，如果是，则为代码示例：https://codesandbox.io/s/render-jsx-text-u480p?fontsize=14&hidenavigation=1&theme=dark

Answer 3

[不幸的是，template literals无法与React组件一起使用。

但是，您可以利用React.Fragment完成所需的操作，如以下示例所示：

function TooltipContent(props) {
  const { variant = "default" } = props;
  const FAQLink = () => <a href="https://google.com">I am a link!</a>;

  let content;

  switch (variant) {
    case "risk":
      content = (
        <React.Fragment>
          RISK! <br />
          <FAQLink />
        </React.Fragment>
      );
      break;
    case "no-risk":
      content = "NO RISK";
      break;
    default:
      content = variant;
  }
  return <p>{content}</p>;
}

这是一个有效的示例：

• CodeSandbox