javascript - 如何在反应中添加指向字符串的链接

Question

我正在尝试在组件的字符串中添加链接，但我遇到了它显示为对象对象的问题。

我将 productPage 链接作为对象或作为组件添加到我的 Tooltip 组件。

在这种情况下如何实现它？

这是我的代码库：

工具提示.js：

const useStylesBootstrap = makeStyles({
  arrow: {
    color: "#e06a56"
  },
  tooltip: {
    backgroundColor: "#e06a56",
    fontSize: 11,
    width: '180px'
  }
});

function BootstrapTooltip(props) {
  const classes = useStylesBootstrap();

  return <Tooltip arrow classes={classes} {...props} />;
}

export default function CustomizedTooltips(props) {
  return (
    <BootstrapTooltip title={props.content}>{props.button}</BootstrapTooltip>
  );
}

应用程序.js：

const renderHideOptionalClauseTrigger = () => {

  const productPage = () => {
    return (
      <Link to="/product">
        Product page
      </Link>
    )
  }

  return (
    <div>
      <text>My Optional Loan Clause</text>
      <Tooltip
        button={
          <span>
            <i className="fas fa-exclamation-circle"></i>
          </span>
        }
        content={
          `Will be added verbatim as last clause to the loan agreement. See ${productPage} for other clauses.`
        }
      />
    </div>
  );
};

更新！如果我这样放我的链接

const productPage = <Link className="orange-link" to="/product">Product page</Link>

它会来对象对象..

标签： javascriptreactjs

Answer 1

您可能需要使用 JSX 元素——否则它会将您的链接转换为字符串（并显示 [object Object]）：

content={
      <>Will be added verbatim as last clause to the loan agreement. See {productPage} for other clauses.</>
    }