JavaScript文字列を作成して、divタグ内に渡すとリストとして表示されるようにしたい

Question

JavaScript を使用して、アイテムのリストを含む文字列を div タグ内に特定の形式で表示しようとしています。文字列には、箇条書きリストとして表示したい項目がいくつか含まれています。以下に文字列の例を示します:

<code>const items = "これらの項目は次のとおりです:\n1. apple\n2. mango";
</code>

div タグ内に次のように表示されるように文字列をフォーマットしたいと考えています。

これらの項目は次のとおりです。
1.リンゴ
2.マンゴー

React と Tailwind CSS を使用していますが、この問題は React コンポーネントに関連しています。

Answer 1

マッピング メソッドを反復処理し、「/n」に遭遇するたびにマッピング メソッドを分割できます。あるいは、この目的のために順序付きリストを作成することもできます。たとえば、以下のコードを見つけてください。

リーリー

これは、実行中の上記のコードのスクリーンショットです。 上記のコードを実行します

Answer 2

文字列を改行で分割し、複数の段落タグにマッピングする必要があります

リーリー

次にHTMLで:

リーリー

これでリストが正しく表示されます。項目が中央揃えで左揃えにしたい場合は、リストの CSS クラスに text-align: left; と入力するだけです