时间戳

首页 > 解决方案 > 在反应绑定中呈现包含 JSX 的字符串

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

问题描述

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

我有一个包含 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>
 );
}

标签： javascriptreactjstypescript

解决方案

不幸的是，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>;
}

这是一个工作示例：

推荐阅读