У меня есть проблема, которую я пытаюсь решить. Я видел еще несколько вопросов, но они не были такими же, как у меня. Это то, что я сейчас пытаюсь сделать.

Text.js

export let exampleText = `This should be line 1
And this should be line 2
\n Maybe this will be line 2?
\\n or maybe this?`

App.jsx

var aboutItems = {
    headerClass: "aboutSection content",
    header: "About Me",
    subtitle: "Developer. Entrepreneur. Engineer.",
    text: Text.exampleText
}
class Site extends React.Component {
    render() {
        return (
            <div>
               <Section items = {aboutItems}/>
            </div>

        );
    }
}
class Section extends React.Component {
    render() {
        return (
            <div className = {this.props.items.headerClass}>
                <h1>{this.props.items.header}</h1>
                <h2>{this.props.items.subtitle}</h2>
                <p className="multi-line">{this.props.items.text}</p>
            </div>
        );
    }
}
ReactDOM.render(
    <Site />,
    document.getElementById("root")
); 

Однако когда появляется текст, в html он отображается так:

This should be line 1 And this should be line 2 Maybe this will be line 2? \n or maybe this?

Я попытался добавить стиль css в многострочный класс, такой как white-space: pre, и хотя он добавляет многострочность, он не удаляет другие пробелы, поэтому использование стилей, таких как заполнение или поля, больше не работает.

Что можно сделать для этого или лучше?

Заранее спасибо.

4
ZarifS 3 Янв 2018 в 00:15

2 ответа

Лучший ответ

Вы должны использовать правило css

white-space: pre-line;

С комбинацией строковых литералов или \n

Вот бегущий пример со строковыми литералами:

const App = () => (
  <div className="line-break">
    {`this is line 1 
    
     
     
     and this is line 2`
    }
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));
.line-break {
  white-space: pre-line;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
7
Sagiv b.g 2 Янв 2018 в 21:28

Ответ, предоставленный @Sagiv b.g, правильный.

белое пространство: предварительная строка

Это ключ здесь.

Найдите ссылку на CodePen в качестве примера

JSX:

let exampleText = `This should be line 1
And this should be line 2
Maybe this will be line 3?
or maybe this?`;

var aboutItems = {
    headerClass: "aboutSection content",
    header: "About Me",
    subtitle: "Developer. Entrepreneur. Engineer.",
    text: exampleText
}
class Site extends React.Component {
    render() {
        return (
            <div>
               <Section items = {aboutItems}/>
            </div>

        );
    }
}
class Section extends React.Component {
    render() {
        return (
            <div className = {this.props.items.headerClass}>
                <h1>{this.props.items.header}</h1>
                <h2>{this.props.items.subtitle}</h2>
                <p className="multiline">{this.props.items.text}</p>
            </div>
        );
    }
}
ReactDOM.render(
    <Site />,
    document.getElementById("root")
);

CSS:

.multiline {
   white-space: pre-line;
}
2
Manoj 2 Янв 2018 в 22:01