Ich möchte eine Javascript-Zeichenfolge erstellen, damit sie bei der Übergabe innerhalb eines div-Tags als Liste angezeigt wird

Question

Ich versuche, mit JavaScript eine Zeichenfolge anzuzeigen, die eine Liste von Elementen in einem bestimmten Format in einem div-Tag enthält. Die Zeichenfolge enthält mehrere Elemente, die ich als Aufzählungsliste anzeigen möchte. Hier ist die Beispielzeichenfolge: constitems="Thesearetheitems:
1.apple
2.mango"; Ich möchte die Zeichenfolge so formatieren, dass sie in einem div-Tag wie folgt aussieht: Thesearetheitems:1.apple2.mango Ich verwende React und

P粉893457026 · Answer

您可以迭代映射方法，只要遇到任何“/n”就将其拆分。此外，您也可以为此目的创建一个有序列表。例如，找到下面的代码。

import React from 'react';
    
const items = "
1. apple
2. mango";

const ListComponent = () => {
    const itemList = items.split('
').map((item, index) => {
        const trimmedItem = item.replace(/^\d+\.\s/, '');
        if (item.trim()) {
          return { trimmedItem};
        }
        return null;
    });

    return (
        
            Here is the list:
            These are the items:
            {itemList}
        
    );
};

export default ListComponent;

这是上面代码运行时的屏幕截图运行上面的代码

P粉376738875 · Answer

您应该用换行符分割字符串，然后将其映射到多个段落标签

const items = "These are the items:
1. apple
2. mango";

// or if you want it t be reactive:
const [items, setItems] = useState("These are the items:
1. apple
2. mango");

然后在html中：

    
      {items.split('
').map((el) => (
         {el}
       ))}

现在列表可以正确显示，如果项目居中并且您希望它们左对齐，只需输入 text-align: left;在列表 css 类中