React中如何垂直渲染数组？错题展示格式问题求助

问题根源 #

你的代码存在几个关键问题导致内容挤在同一行：

1. 将三个文本内容塞进数组直接渲染，React会把数组元素拼接成连续文本，没有换行分隔
2. \n在HTML中仅被视为空白字符，不会触发换行效果
3. 存在无效HTML嵌套（<p><p>...</p></p>），浏览器解析时会破坏原有布局结构
4. 用<span>包裹<p>标签完全多余，<p>本身就是块级元素

修复方案 #

方案1：用块级元素拆分每一行（推荐）

直接为每个信息项单独创建<p>标签，利用块级元素默认换行的特性：

// 重构错题列表生成逻辑
const wrongItems = questions.map((_, index) => (
    <div className="wrong-item" key={index}>
        <p>Question: {questionWrongSelection[index]}</p>
        <p>Your Answer: {wrongAnswer[index]}</p>
        <p>Correct Answer: {rightAnswer[index]}</p>
    </div>
));

然后修改外层渲染结构，去掉多余嵌套：

<div className='wrongselection'>
    <hr />
    <h3>Wrong Answers</h3>
    {wrongItems}
</div>

方案2：用<br />强制换行

如果不想拆分多个标签，可通过<br />实现换行：

const wrongItems = questions.map((_, index) => (
    <div className="wrong-item" key={index}>
        Question: {questionWrongSelection[index]}<br />
        Your Answer: {wrongAnswer[index]}<br />
        Correct Answer: {rightAnswer[index]}
    </div>
));

优化样式建议 #

添加简单CSS让排版更清晰：

.wrong-item {
    margin: 1.5rem 0;
    padding: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background-color: #fafafa;
}

.wrong-item p {
    margin: 0.6rem 0;
}

内容的提问来源于stack exchange，提问作者Jeevan