如何從包含以下內容的字符串中預填充文本區域 <br /> 字符串之間的標簽

Question

我得到一個像1 2 <br /> 3 <br /> 4 4這樣的字符串，我想用LINE BREAKS在文本區域中渲染它。

請查看jsfiddle以了解我要達到的目標-https : //jsfiddle.net/pejxqn68/1/

class Hello extends React.Component {
  render() {
    return (
        <div>
          <textarea value={this.props.textareaValue}></textarea>
        </div>
    );
  }
}

ReactDOM.render(
  <Hello textareaValue="1 2 <br /> 3 <br /> 4 4" />,
  document.getElementById('container')
);

我如何在textarea中渲染字符串，以使br標簽作為換行符渲染？

編輯-

由於我無法將textarea更改為div因此在我的情況下是不可能的。

另外，我想要一種解決問題的更react方式（如果有的話）

Answer 1

這可能會有所幫助； 更換所有br與\\n類您好擴展React.Component {渲染（）{回報（）; }}

ReactDOM.render(
  <Hello textareaValue={"1 2 <br /> 3 <br /> 4 4".replace(/<br\s?\/?>/g,"\n")} />,
  document.getElementById('container')
);

工作片段https://jsfiddle.net/pejxqn68/22/

Answer 2

我不知道反應，但我知道要返回行，您需要將<br />轉換為\\n 。

因此，按照

"1 2 <br /> 3 <br /> 4 4".replace(/\<br +\/\>/g, '\n')

如小提琴所示

Answer 3

您可以使用正則表達式用換行符替換<br>標記，如下所示：

class Hello extends React.Component {
  render() {
    return (
        <div>
          <textarea value={this.props.textareaValue.replace(/<br \/>/g, '\n')} />
        </div>
    );
  }
}

ReactDOM.render(
  <Hello textareaValue="1 2 <br /> 3 <br /> 4 4" />,
  document.getElementById('container')
);

更新的小提琴： https : //jsfiddle.net/pahund/pejxqn68/24/