React 数组元素换行：使用 <p> 标签或 CSS 样式实现

在 React 中，使用<br>标签换行不起作用，因为 React 会将标签中的文本内容转义，包括换行符。要实现换行提示，可以使用<p>标签或者CSS样式来实现。\n\n使用<p>标签：\njsx\nconst items = ["item1", "item2", "item3"];\n\nfunction App() {\n return (\n <div>\n {items.map((item, index) => (\n <p key={index}>{item}</p>\n ))}\n </div>\n );\n}\n\n\n使用CSS样式：\njsx\nconst items = ["item1", "item2", "item3"];\n\nconst itemStyle = {\n whiteSpace: "pre-line"\n};\n\nfunction App() {\n return (\n <div>\n {items.map((item, index) => (\n <span key={index} style={itemStyle}>\n {item}\n <br />\n </span>\n ))}\n </div>\n );\n}\n\n\n以上代码中，使用<p>标签或者设置CSS样式whiteSpace: "pre-line"，可以让文本根据换行符进行换行提示。每个item都被包裹在一个<p>标签内或者设置了样式的<span>标签内。使用map方法遍历数组中的每个item，给每个item添加一个唯一的key属性。