如何在反應中添加指向字符串的鏈接

Question

我正在嘗試在組件的字符串中添加鏈接，但我遇到了問題，它顯示為 Object Object。

我將 productPage 鏈接添加為 object 或作為我的工具提示組件的組件。

在這種情況下我該如何實現？

這是我的代碼庫：

工具提示.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>

它會來 Object Object..

Answer 1

您可能需要使用 JSX 元素——否則它會將您的鏈接轉換為字符串（並顯示 [object Object]）：

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