Показать отредактированный / стилизованный текст - реагировать

Question

Я создаю веб-приложение для размещения объявлений. Пользователь может использовать расширенный текстовый редактор, то есть он может выделять буквы жирным шрифтом, подчеркивать их и так далее. Затем я сохраняю этот текст с описанием «content» в моей базе данных mongodb в виде строки. Каждый пост имеет заголовок и контент. Когда я показываю сообщение вместо того, чтобы показывать « этот текст сильный », он показывает « этот текст сильный ». (добавил пробел в , потому что иначе это сделает его сильным. Вы понимаете, что я имею в виду: P) Очевидно, что это происходит не только в сильном случае, но со всеми правками. например, в абзацах это как этот абзац

и т. д.

Как я могу отобразить контент, который должен быть (стилизован), а не просто как строка без правок и стилей ? Может быть, это тот факт, что я храню его в моей БД в виде строки? но тогда какой тип я должен хранить как?

Размещение изображений для справки

Answer 1

Допустить это довольно опасно, если честно - вы должны быть ЧРЕЗВЫЧАЙНО осторожны с тем, что вы разрешаете и как вы дезинфицируете ввод (не разрешая теги сценария и т. Д. c ..) ..

Я бы не рекомендовал делать это ...

Причина, по которой это происходит, заключается в том, что React дезинфицирует ввод для вас (по сути, превращая любой html в простую строку - не настоящая дезинфекция, но вы понимаете, в чем дело ) ... если вы хотите отобразить пользовательский ввод HTML, вы должны использовать dangerouslySetInner HTML - он должен быть представлен в следующем формате: { __html: '<p>The Dangerous HTML</p>' }

const { useState, dangerouslySetInnerHTML } = React;
const { render } = ReactDOM;

function App() {
  const [html, setHtml] = useState();
  
  const handleChange = event => {
    setHtml({ __html: event.target.value});
  }
  
  return (
    <div>
      <h3>Enter some html</h3>
      <input onChange={handleChange} type="text" /> 
      {html && <div dangerouslySetInnerHTML={html} />}
    </div>
  );
}

render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>