Как обрабатывать новую строку в JSON

Question

Всем привет,

Для понимания опишу структуру проэкта: если кратко то это можно назвать Headless Wordpress или Headless CMS, у меня есть админпанель на вордпресс, основное приложение на React Next.js, на вордпресс с помощью Advanced Custom Fields создаю кастомные поля (в данном случае textarea) для блога и с помощью API получаю данные на фронтенд и отображаю их.

Проблема состоит в том что бы как то обрабатывать новые строки (перенос на новые строки) из textarea и передавать на фронтенд вместе с ними.

Пока что у меня работает только так, в textarea на админке вставляю текст вместе с тегами <br/> , а на фронтенде вставляю вот так: <p dangerouslySetInnerHTML={{ __html: text }}/> , где text и есть мой текст полученный с админки, но считаю это костылем и надеюсь что есть вариант сделать это грамотнее и удобнее для администратора который будет писать блоги.

Спасибо!

Answer 1

Если я правильно понял, то требуется вывести на странице текст, в котором есть переносы \n. В таком случае по символу переноса строки можно разбить его на массив и вывести элементы массива, обернув в нужный тег (например в <p></p>

class App extends React.Component {
   constructor(props) {
    super(props);
    this.state = {
      text: ''
    }
   }
   
   onChange = (e) => {
    this.setState({text: e.target.value || ''});
   };
   
   render() {
    return (
    <div>
      <div>
        <textarea value={this.state.text} onChange={this.onChange} ></textarea>
      </div>
      <div>
        {this.state.text.split('\n').map((line) => 
          <p>
            {line}
           </p>
        )}
      </div>
    </div>
    );
   }
};

ReactDOM.render(<App />, document.getElementById("root"));

<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>
<div id="root"></div>

БЛОГ НА HUSL

Как обрабатывать новую строку в JSON

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