Javascript 使用NavLink动态地将最后两个单词包装在字符串中

我当前有一个字符串正在连接…请参阅结尾的配置文件。我试图包装see配置文件，该配置文件被连接到react路由器dom的NavLink中，这是否可能，如果可能，那么最好的方法是什么。我的代码如下：

import React from "react";
import { NavLink } from "react-router-dom";
import "./styles.scss";

export default function App() {
  let str = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit
nisi sed sollicitudin pellentesque. Nunc posuere purus rhoncus pulvinar
aliquam. Ut aliquet tristique nisl vitae volutpat. Nulla aliquet
porttitor venenatis. Donec a dui et dui fringilla consectetur id nec
massa. Aliquam erat volutpat. Sed ut dui ut lacus dictum fermentum vel
tincidunt neque. Sed sed lacinia lectus. Duis sit amet sodales felis.
Duis nunc eros, mattis at dui ac, convallis semper risus. In adipiscing
ultrices tellus, in suscipit massa vehicula eu. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin
pellentesque. Nunc posuere purus rhoncus pulvinar aliquam. Ut aliquet
tristique nisl vitae volutpat. Nulla aliquet porttitor venenatis. Donec
a dui et dui fringilla consectetur id nec massa. Aliquam erat volutpat.
Sed ut dui ut lacus dictum fermentum vel tincidunt neque. Sed sed
lacinia lectus. Duis sit amet sodales felis. Duis nunc eros, mattis at
dui ac, convallis semper risus. In adipiscing ultrices tellus, in
suscipit massa vehicula eu.`;

// I am using this as a solution for ensuring my character count doesn't go over 570 words, I have tried a pure css solution but the overflow: hidden would hide the read more.

  if (str.length >= 570) {
    str = str.substring(0, 570) + `... see profile`;
  } else if (str.length <= 570) {
    str = str + `... see profile`;
  }

  return (
    <div className="customer-card-bottom">
      <div className="customer-card-body">{str}</div>
    </div>
  );
}

从“React”导入React；
从“react router dom”导入{NavLink}；
导入“/styles.scss”；
导出默认函数App（）{
让str=`Lorem ipsum dolor坐在我的位子上，奉献我的精英。Nam hendrerit
这是一种很好的解决办法
这是我生命中最重要的部分
威尼斯港口。不需要一个二等舱和一个二等舱
在发酵的过程中，你会发现你的身体有缺陷
内克先生，我是莱克尼亚·莱克图斯先生，我是阿梅特·索达莱斯·费利斯先生。
杜伊斯·努克·厄洛斯，杜伊斯·马蒂斯，康瓦利斯·森佩尔·里苏斯，在阿迪皮辛
ultrices tellus，在欧盟的交通工具中。Lorem ipsum dolor sit
阿梅特，尊敬的精英。南·亨德雷特·尼西·赛德·索利西图丁
佩伦茨克。努克·波苏尔·珀鲁斯·朗卡斯·普尔文纳·阿利奎姆。乌特·阿利奎特
维生三联症，不适用于威尼斯人
一个酒后驾车和一个酒后驾车的人，我不知道该怎么办。
这是一次酒后驾车，也是一次酒后驾车
拉西尼亚·莱克图斯。两人坐在阿梅特·索达莱斯·费利斯旁边。两人坐在努克·厄洛斯旁边，马蒂斯在
酒后驾车，康瓦利斯·森佩尔·里苏斯。在一个特别的地方
suscipit massa vehicula eu.`；
//我用它作为一个解决方案，以确保我的字符数不超过570字，我尝试了一个纯css解决方案，但溢出：隐藏将隐藏读取更多。
如果（str.length>=570）{
str=str.substring（0570）+`……参见概要文件`；
}否则，如果（str.length这里的解决方案是使用JSX来构建视图剖面部分：

import React from "react";
import { NavLink } from "react-router-dom";
import "./styles.scss";

function SimpleNavLink({ children }) {
  return <a href="#something">{children}</a>;
}

export default function App() {
  let str = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit
nisi sed sollicitudin pellentesque. Nunc posuere purus rhoncus pulvinar
aliquam. Ut aliquet tristique nisl vitae volutpat. Nulla aliquet
porttitor venenatis. Donec a dui et dui fringilla consectetur id nec
massa. Aliquam erat volutpat. Sed ut dui ut lacus dictum fermentum vel
tincidunt neque. Sed sed lacinia lectus. Duis sit amet sodales felis.
Duis nunc eros, mattis at dui ac, convallis semper risus. In adipiscing
ultrices tellus, in suscipit massa vehicula eu. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin
pellentesque. Nunc posuere purus rhoncus pulvinar aliquam. Ut aliquet
tristique nisl vitae volutpat. Nulla aliquet porttitor venenatis. Donec
a dui et dui fringilla consectetur id nec massa. Aliquam erat volutpat.
Sed ut dui ut lacus dictum fermentum vel tincidunt neque. Sed sed
lacinia lectus. Duis sit amet sodales felis. Duis nunc eros, mattis at
dui ac, convallis semper risus. In adipiscing ultrices tellus, in
suscipit massa vehicula eu.`;

  if (str.length >= 570) {
    str = str.substring(0, 570);
  }

  return (
    <div className="customer-card-bottom">
      <div className="customer-card-body">
        {str}&nbsp;
        <SimpleNavLink>...see profile</SimpleNavLink>
      </div>
    </div>
  );
}

从“React”导入React；
从“react router dom”导入{NavLink}；
导入“/styles.scss”；
函数SimpleNavLink（{children}）{
返回；
}
导出默认函数App（）{
让str=`Lorem ipsum dolor坐在我的位子上，奉献我的精英。Nam hendrerit
这是一种很好的解决办法
这是我生命中最重要的部分
威尼斯港口。不需要一个二等舱和一个二等舱
在发酵的过程中，你会发现你的身体有缺陷
内克先生，我是莱克尼亚·莱克图斯先生，我是阿梅特·索达莱斯·费利斯先生。
杜伊斯·努克·厄洛斯，杜伊斯·马蒂斯，康瓦利斯·森佩尔·里苏斯，在阿迪皮辛
ultrices tellus，在欧盟的交通工具中。Lorem ipsum dolor sit
阿梅特，尊敬的精英。南·亨德雷特·尼西·赛德·索利西图丁
佩伦茨克。努克·波苏尔·珀鲁斯·朗卡斯·普尔文纳·阿利奎姆。乌特·阿利奎特
维生三联症，不适用于威尼斯人
一个酒后驾车和一个酒后驾车的人，我不知道该怎么办。
这是一次酒后驾车，也是一次酒后驾车
拉西尼亚·莱克图斯。两人坐在阿梅特·索达莱斯·费利斯旁边。两人坐在努克·厄洛斯旁边，马蒂斯在
酒后驾车，康瓦利斯·森佩尔·里苏斯。在一个特别的地方
suscipit massa vehicula eu.`；
如果（str.length>=570）{
str=str.substring（0570）；
}
返回(
{str}
…见个人资料
);
}

这样做允许您仍然确保内容少于570个字符，同时仍然能够在最后一位使用react元素

请记住，您将用
替换
，在JSX中这样做不是更容易吗？我这样做的原因是为了确保字符数不会超过570个，您仍然可以这样做，而无需在JSX中附加配置文件链接字符串。这是我提出的解决方案，我将在回答中为您添加它；是b吗实际上是在内容lol之间添加空格的懒惰方式