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

text.join将呈现单个字符串，在这种情况下包括<hr />。为了渲染JSX，请尝试：

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

  // add strings in the array

  return text.map((item, index) => (
    <span key={index}>
      {item}
      {index && <hr />}
    </span>
  ));
}

这里唯一的缺点是额外的跨度，但我更倾向于使用dangerouslySetInnerHTML。

Answer 2

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您还可以使用return text.map(e => <div>{e}</div>);将每个字符串放在自己的行中。

＆＃13;

function addMessages() {
   const text = [];
   
   text.push("1st line");
   text.push("2nd line");
   text.push("Third line");
   text.push("And a final one");

   return text.map(e => <div>{e}</div>);
}


const App = () => <div>{addMessages()}</div>

ReactDOM.render(<App />, document.getElementById('app'))

＆＃13;

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

＆＃13;

在React中将文本分成多行

3 个答案: