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>)

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

2 个答案: