Параграф в JSX файле

Question

Как решить проблему с переносом строки в JSX файле в ReactJS? Тег pre не работает, а br выглядит ужасно и неэффективно.

<div className={classes.poem}>
  <h3 className={classes.title}>{props.title}</h3>
  <pre>
    {props.poem}
    Գիշերն ամբողջ հիվանդ, խելագար, <br/>
    Ես երազեցի արեւի մասին: <br/>
    Շուրջս ո՛չ մի ձայն ու շշուկ չկար – <br/>
    Գունատ էր շուրջս՝ գիշեր ու լուսին: <br/>
    Ես երազեցի արեւի ոսկին, <br/>
    Տենչացի նրա հրաշքը խնդուն՝ <br/>
    Ուզեցի սիրել շշուկն իմաստուն՝ <br/>
    Արեւանման, արնավառ խոսքի, – <br/>
    Բայց շուրջս այնպես գունատ էր, տկար – <br/>
    Խոսքեր չկային, ու արեւ չկար … <br/>
  </pre>
</div>

Answer 1

Шаблонные литералы позволяют использовать многострочные строки, которые сохраняют начальные/конечные пробелы и новые строки. Шаблонные литералы должны быть заключены в обратные кавычки. Плюс ко всему в JSX нужно этот шаблонный литерал заключить в фигурные скобки. Для наглядности приведет пример ниже:

class SomeComponent extends React.Component {
   render() {
        return (
          <pre>{`
            Hello,   
            World.
          `}</pre>
        )
    }
}

Пример, согласно прикрепленному блоку кода из вопроса:

class SomeComponent extends React.Component {
   render() {
        return (
          <pre>{`
                    Գիշերն ամբողջ հիվանդ, խելագար,
                    Ես երազեցի արեւի մասին:
                    Շուրջս ո՛չ մի ձայն ու շշուկ չկար –
                    Գունատ էր շուրջս՝ գիշեր ու լուսին:
                    Ես երազեցի արեւի ոսկին,
                    Տենչացի նրա հրաշքը խնդուն՝
                    Ուզեցի սիրել շշուկն իմաստուն՝
                    Արեւանման, արնավառ խոսքի, –
                    Բայց շուրջս այնպես գունատ էր, տկար –
                    Խոսքեր չկային, ու արեւ չկար …
          `}</pre>
        )
    }
}

ReactDOM.render(
  <SomeComponent />, 
  document.getElementById('pre')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!-- The content rendered into this tag should match the content below. -->
<div id="pre"></div>

Ссылка на источник: Formatting code with tag in React and JSX

БЛОГ НА HUSL

Параграф в JSX файле

Ответы (1 шт):