Я использую реагировать. Я хочу добавить разрыв строки <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>
       );
   }
30
Radex 29 Авг 2017 в 12:42

8 ответов

Лучший ответ

Вы должны использовать 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>
   );
}
43
Dekel 29 Авг 2017 в 09:44

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

Реактивный компонент

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

< Сильный > CSS

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

< Сильный > OUTPUT

No results.
Please try another search term.
4
Gulfam 23 Июл 2019 в 09:04

Просто разделите текст на /n, я делаю это следующим образом:

<div>
    {text.split('\n').map((item, i) => <p key={i}>{item}</p>)}
</div>
0
Idan 6 Мар 2020 в 14:34

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

4
mengru zhang 16 Июн 2018 в 06:43

Вот как я обошел это. Пусть message будет prop / variable, в котором есть строка, содержащая разрывы строк для отображения в HTML следующим образом:

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

Чтобы это работало, нам нужно использовать \n вместо тега разрыва <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.
1
Vishal Gulati 2 Апр 2019 в 02:46

Попробуйте с span

return (
           <div className='movieList'><span>{movieList}</span></div>
       );
0
Sankar 29 Авг 2017 в 09:43

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

render () {
...
return (
...
<Typography component="p">
...
{(contact.lastname)?<div>Hello {contact.firstname} {contact.lastname}</div>:''}
...
</Typography>
...
);
}
1
Flavien M. 29 Авг 2019 в 12:07

Разбить текст на строку:

render() {
  ...
  <div>
    {this.props.data.split('\n').map( (it, i) => <div key={'x'+i}>{it}</div> )}
  </div>
  ...
11
Алексей Носиков 7 Окт 2017 в 05:36