javascript - 在 React 中将文本分成多行

Question

我在数组中保存了更多字符串。我想做的是将鼠标悬停在图标上时显示它们，每个图标都位于单独的行上。 到目前为止我尝试过的:

addMessages = () => {
   const text = [];

   //add strings in the array

   return text.join("<hr/>");

}

render() {
   const showWhenHover = this.addMessages();

   return (
            <ActionBar popover={<div> {showWhenHover}</div>}
               <div>
                   <Icon type="myIcon"/>
               </div>
           </ActionBar>
          );
      }
}

当我将鼠标悬停在图标上时，它会显示消息，但不是每条消息都在单独的行上，而是全部在一行中，如下所示:

text1</hr>text2</hr>text3

不是 <hr/>在这种情况下必须使用什么？谢谢

Answer 1

您的函数 addMessage 生成字符串而不是 html 标记。

一种解决方案是使用模板文字allow multiline strings 。另一件事是确保文本包含在已定义尺寸的元素内，或者尺寸足够大以使文本可以转到下一行。

const genText = () => `
  Text with lots of
  spaces within 
  it blah blah blah
  blah
`

const Comp = () => <div style={{width: 100, height: 200}}>{genText()}</div>

ReactDOM.render(<Comp />, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>