如何在两个字符串之间的reactjs中添加一个<br>标签？

Question

我正在使用反应.我想<br>在字符串之间添加换行符

"没有结果"和"请尝试其他搜索字词."

我试过了 'No results.<br>Please try another search term.'

但它不起作用,我需要<br>在html中添加.

任何想法如何解决？

   render() {
       let data = this.props.data;
       let isLoading = this.props.isLoading;
       let isDataEmpty = Object.entries(data).length === 0;
       let movieList = isLoading ? <Loader /> : isDataEmpty ? 'No results. Please try another search term.' :
           Object.entries(data).map((movie, index) => <MovieTile key={index} {...movie[1]} />);
       return (
           <div className='movieList'>{movieList}</div>
       );
   }

Answer 1

您可以使用CSS 空白来解决这个问题。

反应组件

render() {
   message = `No results. \n Please try another search term.`;
   return (
       <div className='new-line'>{message}</div>
   );
}

CSS

.new-line {
  white-space: pre-line;
}

输出

No results.
Please try another search term.

Answer 2

您应该使用JSX而不是字符串:

<div>No results.<br />Please try another search term.</div>

因为每个jsx应该有1个包装器,所以我<div>为字符串添加了一个包装器.

这是在你的代码中:

render() {
   let data = this.props.data;
   let isLoading = this.props.isLoading;
   let isDataEmpty = Object.entries(data).length === 0;
   let movieList = isLoading ? <Loader /> : isDataEmpty ? <div>No results.<br />Please try another search term.</div> :
       Object.entries(data).map((movie, index) => <MovieTile key={index} {...movie[1]} />);
   return (
       <div className='movieList'>{movieList}</div>
   );
}

Answer 3

一些 HTML 元素，例如 <img>和 <input>只使用一个标签。属于单标签元素的标签既不是开始标签也不是结束标签；这是一个自闭合标签。在 JSX 中，您必须包含斜杠。所以，删除<br>并尝试<br />

Answer 4

将文字换行：

render() {
  ...
  <div>
    {this.props.data.split('\n').map( (it, i) => <div key={'x'+i}>{it}</div> )}
  </div>
  ...

Answer 5

这是我解决这个问题的方法。让 message 成为包含要在 HTML 中显示的换行符的字符串的道具/变量，如下所示：

message = 'No results.<br>Please try another search term.';
<div>
  {message}
</div>

为了使其工作，我们需要使用\n代替 break 标记<br>并在此消息的包装器元素上设置以下 css，如下所示：

message = 'No results.\nPlease try another search term.';
<div className="msg-wrapper">
  {message}
</div>

CSS：

.msg-wrapper {
  white-space: pre-wrap;
}

输出：

No results.
Please try another search term.