Html 如何使用react-typescript以列表方式显示JSON中的长字符串数据

如果描述字符串太长，如何以列表方式显示JSON中的长字符串数据。如何使用react和typescript拆分或格式化描述

我有以下JSON数据：

"options": [
              {
                "perkType": "GIFT_CARD",
                "tierRewardId": "ff592a61-3e64-474e-a3e5-cb7c14cc73e1",               
                "perkDescription": "**Important details about the Perk:**\n*   Perks are random additional items. These are not earned, but extra items given to customers outside of the spend levels.\n*   See Terms and Conditions for exclusions and additional information.\n* [Terms & Conditions](www.xyz.net/TermsandConditions)",               
              },
              {
                "tierRewardId": "0aa6b029-3179-41dd-8726-78ca7e4bfe18",                
                "perkType": "TOOL_RENTAL",              
                "perkDescription": "**Important details about the Mik Perk:**\n*   Mik Perks are random additional items. These are not earned, but extra items given to customers outside of the spend levels.\n*   See Terms and Conditions for exclusions and additional information.\n*  [Terms & Conditions](www.xyz.net/TermsandConditions)"
              }
            ],

const optionGift = this.state.currentData.item.tierPerks[0].options.filter(
        (list) => list.perkType === 'GIFT_CARD');
    const optionGiftCard= optionGift.map((value)=> value );
    const OptionRental = this.state.currentData.item.tierPerks[0].options.filter(
        (list) => list.perkType === 'TOOL_RENTAL',);
    const OptionRentalTool= OptionRental.map((value)=> value );

  <div> <ul className="YourPerkOption__modelParagraph">
              <li>{props.optionGiftCard[0].perkDescription}</li></ul></div>

我已经过滤了数据：

"options": [
              {
                "perkType": "GIFT_CARD",
                "tierRewardId": "ff592a61-3e64-474e-a3e5-cb7c14cc73e1",               
                "perkDescription": "**Important details about the Perk:**\n*   Perks are random additional items. These are not earned, but extra items given to customers outside of the spend levels.\n*   See Terms and Conditions for exclusions and additional information.\n* [Terms & Conditions](www.xyz.net/TermsandConditions)",               
              },
              {
                "tierRewardId": "0aa6b029-3179-41dd-8726-78ca7e4bfe18",                
                "perkType": "TOOL_RENTAL",              
                "perkDescription": "**Important details about the Mik Perk:**\n*   Mik Perks are random additional items. These are not earned, but extra items given to customers outside of the spend levels.\n*   See Terms and Conditions for exclusions and additional information.\n*  [Terms & Conditions](www.xyz.net/TermsandConditions)"
              }
            ],

const optionGift = this.state.currentData.item.tierPerks[0].options.filter(
        (list) => list.perkType === 'GIFT_CARD');
    const optionGiftCard= optionGift.map((value)=> value );
    const OptionRental = this.state.currentData.item.tierPerks[0].options.filter(
        (list) => list.perkType === 'TOOL_RENTAL',);
    const OptionRentalTool= OptionRental.map((value)=> value );

  <div> <ul className="YourPerkOption__modelParagraph">
              <li>{props.optionGiftCard[0].perkDescription}</li></ul></div>

组件tsx代码：

"options": [
              {
                "perkType": "GIFT_CARD",
                "tierRewardId": "ff592a61-3e64-474e-a3e5-cb7c14cc73e1",               
                "perkDescription": "**Important details about the Perk:**\n*   Perks are random additional items. These are not earned, but extra items given to customers outside of the spend levels.\n*   See Terms and Conditions for exclusions and additional information.\n* [Terms & Conditions](www.xyz.net/TermsandConditions)",               
              },
              {
                "tierRewardId": "0aa6b029-3179-41dd-8726-78ca7e4bfe18",                
                "perkType": "TOOL_RENTAL",              
                "perkDescription": "**Important details about the Mik Perk:**\n*   Mik Perks are random additional items. These are not earned, but extra items given to customers outside of the spend levels.\n*   See Terms and Conditions for exclusions and additional information.\n*  [Terms & Conditions](www.xyz.net/TermsandConditions)"
              }
            ],

const optionGift = this.state.currentData.item.tierPerks[0].options.filter(
        (list) => list.perkType === 'GIFT_CARD');
    const optionGiftCard= optionGift.map((value)=> value );
    const OptionRental = this.state.currentData.item.tierPerks[0].options.filter(
        (list) => list.perkType === 'TOOL_RENTAL',);
    const OptionRentalTool= OptionRental.map((value)=> value );

  <div> <ul className="YourPerkOption__modelParagraph">
              <li>{props.optionGiftCard[0].perkDescription}</li></ul></div>

{props.optionGiftCard[0].perkDescription}

我正在尝试将列表数据显示为以下格式

---

如果有人能帮忙，请。

您可以使用正则表达式将perkDescription拆分为一个数组，然后映射该数组。

自定义代码 如果我理解正确的话，

perkDescription

的第一行是标题（

**关于Mik Perk的重要细节：*

），后面的几行是要点。我们需要将

字符串

分解为多个

字符串

段，然后通过JSX将它们呈现给DOM。让我们把它变成它自己的可重用组件

import ReactMarkdown from 'react-markdown'

我们需要的唯一道具是

字符串

文本

interface PerkDescriptionProps {
  text: string;
}

我们的组件使用该方法将

文本

分解为

行

的

数组

。我们将数组的第一个元素存储到一个变量

title

，其余的行存储到另一个变量

bullets

。然后我们循环遍历

项目符号

数组，并将每个项目放入

li

元素中

export const PerkDescription = ({ text }: PerkDescriptionProps) => {
  const lines = text.split("\n");
  const [title, ...bullets] = lines;
  return (
    <div className="perkDescription">
      <div className="perkDescriptionTitle">{title}</div>
      <ul className="perkDescriptionList">
        {bullets.map((line, i) => (
          <li key={i}>{line}</li>
        ))}
      </ul>
    </div>
  );
};

{optionGiftCard[0].perkDescription}

非常感谢您的帮助。非常感谢你。