如何从字符串之间包含<br/>标签的字符串预填充文本区域

Question

我收到了一个像1 2 <br /> 3 <br /> 4 4这样的字符串，我希望在LINE BREAKS的textarea中呈现这个字符串。

请查看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     class Hello扩展了React.Component {       render（）{         回来（                                                  ）;       }     }

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

如this fiddle

所示

Answer 3

您可以使用正则表达式将＆lt; br＆gt; 标记替换为换行符，如下所示：

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/