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

Question

我当前有一个正在连接的字符串...请参阅其末尾的配置文件。我正在尝试包装从react-router-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>
  );
}

附上调试测试用的代码笔:https://codesandbox.io/s/elated-framework-3v0c4?file=/src/App.js

Answer 1

这里的解决方案是使用 JSX 来构建 View 配置文件部分:

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

这样做可以让您仍然确保内容低于 570 个字符，同时仍然能够在最后一点使用您的 React 元素。

请记住，您将替换 <SimpleNavLink />与 <NavLink />