我們在用React開發Web專案的過程中，有的時候，我們需要把textarea中輸入的多行字串，在其他的標籤中輸出來，比如p標籤。但是，往往這個時候，在p標籤中輸出的內容其預設情況下是不換行的。比如下面的程式碼：

import React,{Component} from 'react';
export default class HelloWorld extends Component{

  constructor(){
    super(...arguments);
    this.state={
      note:"",
    }
  }

  render(){
    return
 
(
    <div className="app" style={{padding:"10px 5px 15px 20px"}}>
          <form id="noter-save-form" method="POST" style={{topPadding:"100px",leftPadding:"100px"}}>
              <textarea id="noter-text-area" style={{height:"100px"}} name="textarea" onChange={(e)=> this.setState({note:e.target.value}) } ></textarea>
              <hr/>
              <label>The input value for
 
 Note:</label>
              <hr/>
              <p>{this.state.note}</p>
              <hr/>
           </form>
    </div>
  );
  }
}

下面是其渲染的結果：

我們可以看出，其在TextArea中輸入的回車換行，在p標籤中，壓根顯示不出來。
那麼這個時候，我們應該怎麼辦？其實解決的方案很簡單，程式碼入下：

import React,{Component} from 'react'
 
;
export default class HelloWorld extends Component{

  constructor(){
    super(...arguments);
    this.state={
      note:"",
    }
  }

  render(){
    return(
    <div className="app" style={{padding:"10px 5px 15px 20px"}}>
          <form id="noter-save-form" method="POST" style={{topPadding:"100px",leftPadding:"100px"}}>
              <textarea id="noter-text-area" style={{height:"100px"}} name="textarea" onChange={(e)=> this.setState({note:e.target.value}) } ></textarea>
              <hr/>
              <label>The input value for Note:</label>
              <hr/>
              <p>
              {this.state.note.split('\n').map(function(item) {
                  return (
                    <span>
                      {item}
                      <br/>
                    </span>
                  )
                })} </p>
              <hr/>
           </form>
    </div>
  );
  }
}

從上面的程式碼可以看出，我們在p標籤中渲染的時候，把textarea中輸入的\n
換成了br標籤。

 {this.state.note.split('\n').map(function(item) {
                  return (
                    <span>
                      {item}
                      <br/>
                    </span>
                  )
                })} 

換完後，UI渲染的效果如下：