Saya mahu mencipta rentetan javascript supaya apabila ia diluluskan di dalam tag div ia dipaparkan sebagai senarai

Question

Saya cuba menggunakan JavaScript untuk memaparkan rentetan yang mengandungi senarai item dalam format tertentu di dalam teg div Rentetan mengandungi beberapa item yang saya ingin paparkan sebagai senarai bertitik tumpu. Berikut ialah rentetan contoh:

<code>const item = "Ini ialah item:n1.
</code>

Saya mahu memformat rentetan supaya ia kelihatan seperti ini di dalam teg div

Ini ialah item:
1. epal
2.mangga
Saya menggunakan React dan Tailwind CSS dan isu ini berkaitan dengan komponen React. 

Answer 1

Anda boleh mengulangi kaedah pemetaan dan membahagikannya apabila ia menemui sebarang "/n". Sebagai alternatif, anda boleh membuat senarai tersusun untuk tujuan ini. Sebagai contoh, cari kod di bawah.

import React from 'react';
    
const items = "\n1. apple\n2. mango";

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

    return (
        <div>
            <p>Here is the list:</p>
            <p>These are the items:</p>
            <ol>{itemList}</ol>
        </div>
    );
};

export default ListComponent;
    

Berikut ialah tangkapan skrin bagi kod di atas yang sedang berjalan Jalankan kod di atas

Answer 2

Anda harus membelah rentetan dengan baris baharu dan kemudian memetakannya kepada beberapa tag perenggan

const items = "These are the items:\n1. apple\n2. mango";

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

Kemudian dalam html:

    <div className="list">
      {items.split('\n').map((el) => (
         <p>{el}</p>
       ))}
    </div>

Sekarang senarai dipaparkan dengan betul, jika item berada di tengah dan anda mahu ia dijajar ke kiri, hanya taip text-align: left dalam kelas css senarai