Как сделать Markdown как чистые компоненты React

Markdown — это самый разумный способ легко написать текст. Многим приложениям, в которых пользователю разрешено записывать и хранить некоторый текст в базе данных в этом формате, когда-нибудь потребуется его где-нибудь визуализировать. Проблема в том, что на каждой платформе это поведение можно обрабатывать по-разному, некоторые разработчики могут просто преобразовать уценку в HTML на стороне сервера, а другие, например, внешний разработчик, который не слишком много работает с технологиями на стороне сервера, просто преобразовать уценку в HTML на стороне клиента. Это, хотя и не самый лучший подход для приложений, которые используются повсеместно, в любом браузере и для многих людей, но довольно хорошо, когда это только для корпоративного приложения, где пользователю всегда нужно будет использовать ваше приложение, не жалуясь на спектакль.

Другая проблема, которую вам нужно решить, это процесс отладки, когда вы работаете с React, используя инструменты разработки React, вы можете легко отладить, какие компоненты дают сбой и где они находятся, но когда вы переносите Markdown в HTML, это не так просто в React. Вот почему @rexxars Разработан замечательный компонент, который позволяет легко конвертировать разметку в компоненты React (для визуализации в представлении).

1. Установите компонент React Markdown.

С помощью стороннего компонента, а именно React Markdown, вы сможете легко конвертировать обычную уценку в React Components. Чтобы установить этот компонент в своем проекте, переключитесь в каталог вашего проекта с терминалом и выполните следующую команду NPM:

npm install --save react-markdown

Вы можете получить больше информации о посещении этого компонента официальный репозиторий на Github здесь. Компонент, используемый под капотом, использует удивительный CommonMark, рационализированную версию синтаксиса Markdown, со спецификациями и BSD-лицензированными ссылочными реализациями на C и JavaScript. Для получения дополнительной информации, для получения дополнительной информации посетите официальный сайт или же хранилище в Githbub здесь. В то же время, чтобы преобразовать уценку в React Components, он использует модуль Common Mark React Renderer, рендер для CommonMark, который возвращает массив элементов React, готовых для использования в компоненте React.

Заметка

Единственным недостатком React Markdown является то, что встроенные атрибуты внутри HTML не работают.

2. Использование его как компонента

Сам модуль / библиотека — это просто компонент React, который может быть легко встроен в любое представление React, которое вы хотите, просто импортируя react-markdown и установить некоторые варианты:

import Markdown from 'react-markdown';

Таким образом, вы можете использовать его внутри вашего приложения, как:

import React from 'react';
// Import the Markdown component
import Markdown from 'react-markdown';
export default class App extends React.Component {
constructor(props, context) {
super(props, context);
// Define some Markdown content
this.ContentMarkdown = `# Your markdown here \n This won't be translated into HTML`;
}
render() {
return (
{/* Render the markdown component */}
);
}
}

Возможные типы элементов, которые могут быть разрешены / запрещены: (и компоненты Reacts, которые переведены в):

• HtmlInline — Встроенный HTML
• HtmlBlock — Блок HTML
• Text — Текстовые узлы (внутри абзацев, элементов списка и т. Д.)
• Paragraph — Узлы абзаца (

  )

• Heading — Заголовки (,


  так далее)

• Softbreak — Новые строки
• Hardbreak — Жесткие разрывы строк (
)
• Link — Узлы связи ()
• Image — Узлы изображения ()
• Emph — акцент узлов ()
• Code — Встроенные узлы кода ()
• CodeBlock - блоки кода ()
• BlockQuote - Блокировать кавычки ()
• List - Список узлов (
  ,
  )
  • Item - Узлы элементов списка (
  • )
  • Strong - Сильные / жирные узлы ()
  • ThematicBreak - Горизонтальные узлы правил ()

  В этом случае с предоставленной уценкой созданный контент был:

  

  Заметка

  Запрещение узла также предотвратит рендеринг любых потомков этого узла, если только unwrapDisallowed опция установлена ​​в true, Например, запрещение абзаца не будет отображать его дочерние текстовые узлы.