Предположим, что у меня есть текстовая строка, содержащая разрывы строк, и я делаю ее следующим образом:
render() {
var text = "One\nTwo\nThree";
return <div>{text}</div>;
}
В HTML разрывы строк не отображаются в виде разрывов строк. Как мне это сделать в Реагировании? Я не хочу конвертировать в теги <br> и использовать dangerouslySetInnerHTML. Есть ли другой способ?
Вы можете попробовать поставить div для каждой строки
render() {
return (<div>
<div>{"One"}</div>
<div>{"Two"}</div>
<div>{"Three"}</div>
</div>);
}
Или
render() {
var text = "One\nTwo\nThree";
return (
<div>
{text.split("\n").map((i,key) => {
return <div key={key}>{i}</div>;
})}
</div>);
}
Создайте новый CSS-класс
.display-linebreak {
white-space: pre-line;
}
Показать текст с этим CSS-классом
render() {
const text = 'One \n Two \n Three';
return (
<div className="display-linebreak">
{text}
</div>
);
}
Рендеринг с переносами строк (последовательности пробелов будут свернуты в один пробел. Текст будет перенесен при необходимости). Как это:
One
Two
Three
Вы также можете рассмотреть возможность предварительной упаковки. Подробнее здесь (Свойство CSS пробел).
Вы можете использовать свойство CSS "white-space: pre". Я думаю, что это самый простой способ справиться с этим.
Здесь самое чистое решение (afaik):
render(){
return <pre>
Line 1{"\n"}
Line 2{"\n"}
Line 3{"\n"}
</pre>
}
Вместо вас также можно использовать <div style={{whiteSpace:"pre"}}> или любой другой элемент html-блока (например, span или p с этим атрибутом стиля)
Визуализируйте текст с разделителями "Моя строка одна\nМоя вторая строка \nWhatevs..." внутри обычной текстовой области HTML. Я знаю, что это работает, потому что я только использовал это сегодня! Сделайте текстовое поле readOnly, если нужно, и стиль соответствующим образом.