问题

Sure, here is the translated code part:

我正在创建一个问答应用。我想要以以下方式显示结果

> 问题:  
你的答案:  
正确答案:

但是目前我的代码显示成一行，就像这样（请查看图片链接以查看实际结果）：


> 问题: 你的答案: 正确答案:  
图片链接: [https://ibb.co/30v89qS][1]

以下是我的代码

    
    var indents = [];

    for (var i = 0; i < questions.length; i++) {

        indents.push(<span><p>问题: {[questionWrongSelection[i], `你的答案: ${wrongAnswer[i]}`, `正确答案:\n ${rightAnswer[i]}`]}</p></span>);
    }

这是 div 的样式：-

    <div className='wrongselection'>
        <hr />
        <h3>错误答案</h3>
        <p>
            <p>
                {indents.map(indent=><div>{indent}</div>)}
            </p>
        </p>
    </div>
我尝试使用 .map 方法，但由于某种原因它对我不起作用，或者我可能使用方法不对。任何帮助将不胜感激。

[1]: https://i.stack.imgur.com/swv9q.png

Please note that I've translated the code part, as requested. If you have any further questions or need assistance with this code, feel free to ask.

var indents = [];
for (var i = 0; i < questions.length; i++) {
indents.push(<span><p>Question: {[questionWrongSelection[i], `Your Answer: ${wrongAnswer[i]}`, `Correct Answer:\n ${rightAnswer[i]}`]}</p></span>);
}

<div className='wrongselection'>
<hr />
<h3>Wrong Answers</h3>
<p>
<p>
{indents.map(indent=><div>{indent}</div>)}
</p>
</p>
</div>

答案1

得分: 0

只需将每个单独的<p>标签中的内容括起来。

var indents = [];
for (var i = 0; i < questions.length; i++) {
indents.push(
<span>
<p>问题：{questionWrongSelection[i]}</p>
<p>你的答案：{wrongAnswer[i]} </p>
<p>正确答案：{rightAnswer[i]}</p>
</span>
);
}

var indents = [];
for (var i = 0; i < questions.length; i++) {
indents.push(
<span>
<p>Question: {questionWrongSelection[i]}</p>
<p>Your Answer: {wrongAnswer[i]} </p>
<p>Correct Answer: {rightAnswer[i]}</p>
</span>
);
}

答案2

得分: 0

var indents = [];

for (var i = 0; i < questions.length; i++) {
  indents.push(
    <div className="result">
      <div>
        <strong>Question:</strong> {questionWrongSelection[i]}
      </div>
      <div>
        <strong>Your Answer:</strong> {wrongAnswer[i]}
      </div>
      <div>
        <strong>Correct Answer:</strong> {rightAnswer[i]}
      </div>
    </div>
  );
}

每个问题、答案和正确答案都包含在类名为 "result" 的

.result {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.result div {
  margin-bottom: 5px;
}

return <div>{indents}</div>;

<details>
<summary>英文:</summary>

 each question, answer, and the correct answer is wrapped inside a <div> with the class name "result". You can then apply CSS styles to achieve the column layout
css below - 

Make sure to include the CSS styles in your component or in a separate CSS file that is imported into your component. The display: flex; property with flex-direction: column; creates a column layout for the results, and the margin-bottom properties add some spacing between each result.
Finally, render the indents array in your component:

Hope this will help!!
</details>