Как добавить <br> тег в реакции между двумя строками?

Я использую реакцию. Я хочу, чтобы добавить разрыв строки <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>
       );
   }

Ответы

Ответ 1

Вы должны использовать 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>
   );
}

Ответ 2

перерыв текста в строку:

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

Ответ 3

некоторые HTML-элементы, такие как <img> и <input> используют только один тег. Тег, который принадлежит элементу с одним тегом, не является открывающим тегом или закрывающим тегом; это самозакрывающийся тег. В JSX вы должны включить косую черту. Таким образом, удалить <br> и попробуйте <br/>

Ответ 4

Попробуйте с диапазоном

return (
           <div className='movieList'><span>{movieList}</span></div>
       );

Ответ 5

Вот как я обошел это. Пусть message будет prop/variable, в котором есть строка, содержащая разрывы строк, для отображения в 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.

Ответ 6

Я просто хочу поделиться этой функцией, которую я использовал. Это похоже на Алексей Носиков ответ.

import React from 'react'

export const escapedNewLineToLineBreakTag = (string) => {
  return string.split('\n').map((item, index) => {
    return (index === 0) ? item : [<br key={index} />, item]
  })
}

Ответ 7

Вот как я решил проблему.

Реагировать Компонент

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.

Ответ 8

Если вы находитесь в моей ситуации и не хотите добавлять CSS, вы можете сделать это:

render () {
...
return (
...
<Typography component="p">
...
{(contact.lastname)?<div>Hello {contact.firstname} {contact.lastname}</div>:''}
...
</Typography>
...
);
}