在 React 上设置 innerText答案

【问题标题】：set innerText on React在 React 上设置 innerText
【发布时间】：2017-08-08 09:34:28
【问题描述】：

我有一个接受用户输入的小应用程序，我想在他们输入时向他们展示一个小预览（就像 Stackoverflow 所做的那样）。

我尝试这样的事情：

ReactDOM.render(
  <div>{user_input}</div>,
  document.getElementById('preview')
);

在我尝试添加新行之前它工作得很好，反应它忽略并只呈现一个空白。但如果我在香草 javascript 上这样做：

var content = document.createElement('div');
content.innerText = user_input;
document.getElementById('preview').appendChild(content);

这样做可以解决问题，并且每个换行符都会自动变成<br>标签。

有没有办法在 react 上设置 innerText 还是我应该使用原版解决方案？

使用innerText有什么挫折吗？

【问题讨论】：

听起来您的所有代码都不是“内部”反应组件。一般来说，您可能应该只有一个 ReactDOM.render() 这是 React 表单页面 facebook.github.io/react/docs/forms.html 的链接以及显示受控组件值预览的 codepen 示例 codepen.io/anon/pen/MpOvVw

标签： javascript reactjs dom innertext

【解决方案1】：

下面的代码可能是你需要的。

var user_inputs = ['line1', 'line2'];
var inputs = user_inputs.map(function(user_input, idx){
   return <div key={idx}>{user_input}</div>
});

ReactDOM.render(
  <div className="root">{inputs}</div>,
  document.getElementById('preview')
);

【讨论】：

【解决方案2】：

对于文本所在的block，设置css规则：

white-space: pre-line;

在你的情况下：

ReactDOM.render(
  <div style={{white-space: pre-line}}>{user_input}</div>,
  document.getElementById('preview')
);

【讨论】：

【解决方案3】：

使用这个更适合保持缩进和换行：

white-space: pre-wrap;

它不仅保留了换行符，还保留了空格

所以如果你的文字有

<span id="preview-message" style={{ whiteSpace: 'pre-wrap' }}>
...   white space maintains between dots   ...
</span>

或

<span id="preview-message" style={{ whiteSpace: 'pre-wrap' }}>
  hello everyone...  
       spaces here will be maintain too 
  new line here will maintain too
</span>

【讨论】：