Question

我有一个小应用程序需要用户输入，我想在键入时向他们显示一些预览（正如Stackoverflow所做的那样）。

我尝试这样的事情：

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

它很好用，直到我尝试添加一个新行，反应它忽略并只渲染一个空格。但如果我在vanilla javascript上做到这一点：

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

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

有没有办法在反应中设置innerText，还是应该使用vanilla解决方案？

使用innerText会有挫折吗？

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

Answer 2

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

const ContactButton = styled.button `
  background: ${props => props.caseStudyColor};
  color: #fff;
  font-size: 2rem;
  padding: 10px;
`;




<ContactButton caseStudyColor={'#004655'} />

在您的情况下：

white-space: pre-line;

在React上设置innerText

2 个答案: