Я использую реагировать. Я хочу добавить разрыв строки <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>
);
}
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>
);
}
Вот как я решил проблему.
Компонент React
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.
Просто разделите текст на /n
, я делаю это следующим образом:
<div>
{text.split('\n').map((item, i) => <p key={i}>{item}</p>)}
</div>
Некоторые элементы HTML, такие как <img>
и <input>
, используют только один тег. Тег, который принадлежит элементу с одним тегом, не является открывающим или закрывающим тегом; это самозакрывающийся тег. В JSX вы должны включить косую черту. Итак, удалите <br>
и попробуйте <br />
Вот как я обошел это. Пусть 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.
Попробуйте с span
return (
<div className='movieList'><span>{movieList}</span></div>
);
Если вы похожи на мою ситуацию и не хотите добавлять CSS, вы можете сделать это:
render () {
...
return (
...
<Typography component="p">
...
{(contact.lastname)?<div>Hello {contact.firstname} {contact.lastname}</div>:''}
...
</Typography>
...
);
}
Разбить текст на строку:
render() {
...
<div>
{this.props.data.split('\n').map( (it, i) => <div key={'x'+i}>{it}</div> )}
</div>
...
Похожие вопросы
Связанные вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.