Преобразование текста уценки в компоненты React

Я использую пакет npm с именем реакция-уценка для преобразования фрагмента текста уценки в HTML-код:

import React, { PureComponent } from 'react';
import ReactMarkdown from 'react-markdown';

let body = '## Some markdown text in multiple paragraphs';

class Post extends PureComponent {
  render() {
    <ReactMarkdown source = {body} />
  }
}

export default Post;

Это отлично работает, за исключением того, что отдельные абзацы отображаются со стандартными тегами <p>. В моем случае мне нужно, чтобы они отображались как пользовательские компоненты, скажем, <MyParagraph>. Другими словами, рассмотрим следующий входной текст:

This is paragraph one.

Lorem ipsum doler sit.

This is paragraph two.

реакция-уценка отображает уценку как:

<p>This is paragraph one.</p>

<p>Lorem ipsum doler sit.</p>

<p>This is paragraph two.</p>

И мне это нужно как:

<MyParagraph>This is paragraph one.</MyParagraph>

<MyParagraph>Lorem ipsum doler sit.</MyParagraph>

<MyParagraph>This is paragraph two.</MyParagraph>

Возможно ли это вообще с этим модулем? Или я должен использовать что-то еще?

🤔 А знаете ли вы, что...
JavaScript поддерживает модульную структуру, что способствует организации кода на больших проектах.

[РЕШЕНО]Перейти к решению

4 286

Javascript273878 вопросов Node.js63812 вопросов Reactjs73808 вопросов Markdown1068 вопросов

Ответ:

Решено

Я нашел это: https://github.com/rexxars/react-markdown/issues/218

Свойство renderers полезно для создания пользовательских компонентов.

import ReactDOM from "react-dom";
import React, { PureComponent } from "react";
import ReactMarkdown from "react-markdown";

let body =
  "## Some markdown text in multiple paragraphs\n\nAnd this is a paragraph 1\n\nAnd this is a paragraph 2\n\nAnd this is a paragraph 3";

const MyParagraph = props => (
  <p>This is inside MyParagraph, and the value is {props.children}</p>
);

// see https://github.com/rexxars/react-markdown#node-types
const renderers = {
  paragraph: props => <MyParagraph {...props} />
};

class Post extends PureComponent {
  render() {
    return <ReactMarkdown source = {body} renderers = {renderers} />;
  }
}

export default Post;

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

Вот коды и поле кода выше: https://codesandbox.io/s/awesome-surf-r05kb?fontsize=14

Преобразование текста уценки в компоненты React

Ответ:

Интересные вопросы для изучения