在反应jsx元素数组值中添加新行

Question

在反应中显示值时尝试添加新行。
谁能告诉我我错过了什么？
这是我的代码

const qList = qs.map(
    (question, idx) => (<div key={idx}>{idx>0?<hr />:<span />}{idx+1 + '. ' + 
    question.split('\n').map((item) => {return (item);})}</div>)
  );

  return (
    <div style={{ width: '100%' }}>
      { qList }
    </div>
  );

问题数据：
这是第一行。\n第二行\n这是第三行

预期结果：
这是第一行。
第二行
这是第三行

我得到了什么：
这是第一行，第二行，第三行

reference

更新答案：

const qList = qs.map((question, idx) => (
        <div key={idx}>
          {idx>0?<hr />:<span />}
          {<span>
            {idx+1 + '. '}
          </span>}
          {
            question.split('\n').map(item =>(
              <span>
                {item}
                <br />
              </span>
            ))
          }
        </div>
      ));

return (
    <div style={{ width: '100%' }}>
      { qList }
    </div>
  );

Answer 1

class Application extends React.Component {
render() {
  let qlist = ["this is line first line.\nThe second\n and this is third"];
  return (
    <div style={{ width: '100%' }}>
      { 
        qlist.map((qs, idx) => (
          <div key={idx}>
            {
              qs.split("\n").map(item => (
                <span>
                  {item}
                  <br/>
                </span>
              ))
            }
          </div>
         ))
      }
    </div>
  );
}
}

Answer 2

HTML 不理解 \n。请改用<br />。

这应该会有所帮助：

question.split('\n').map((item) => {return <span> {item} + <br /></span>;})}</div>)