Блог

Главная - Вопросы по программированию - Как использовать пользовательские компоненты в react-markdown

Как использовать пользовательские компоненты в react-markdown

#reactjs #markdown #next.js #remarkjs #chakra-ui

#reactjs #markdown #next.js #remarkjs #chakra-пользовательский интерфейс

Вопрос:

Контекст: у меня есть Next.js сайт с пользовательским интерфейсом Chakra. У меня есть некоторый пользовательский контент markdown, который извлекается из внешнего источника (скажем, GitHub README.md для репозитория) во время выполнения.

Теперь, по умолчанию, react-markdown (основанный на remarkjs) использует HTML <img> -тег для изображений markdown ( ![]() ). Я хочу использовать новый <Image /> компонент, выпущенный в Next.js 10 в предоставленной пользователем уценке. Кроме того, я также хотел бы заменить другие теги соответствующими компонентами пользовательского интерфейса Chakra.

Как мне это сделать?

РЕШЕНИЕ

 // utils/parser.tsx

import Image from 'next/image';

export default function ImageRenderer({ src, alt }) {
  return <Image src={src} alt={alt} unsized />;
}

а затем на требуемой странице:

 //pages/readme.tsx

import ReactMarkdown from 'react-markdown';
import imageRenderer from '../utils/parser';

// `readme` is sanitised markdown that comes from getServerSideProps
export default function Module({ readme }) {
  return <ReactMarkdown allowDangerousHtml={true} renderers={{ image: imageRenderer }} children={readme} />
}

то же самое для других элементов…

Ответ №1:

react-markdown позволяет определять собственные средства визуализации. Недавно я сделал нечто подобное. Я хочу использовать элементы figure и figurecaption. Итак, я создал свой собственный компонент react для визуализации изображений.

Компонент

 export default function ImageRenderer(props) {
    const imageSrc = props.src;
    const altText = props.alt;
    return (
        <figure className="wp-block-image size-large is-resized">
            <img
                data-loading="lazy" 
                data-orig-file={imageSrc}
                data-orig-size="1248,533"
                data-comments-opened="1"
                data-image-meta="{amp;quot;apertureamp;quot;:amp;quot;0amp;quot;,amp;quot;creditamp;quot;:amp;quot;amp;quot;,amp;quot;cameraamp;quot;:amp;quot;amp;quot;,amp;quot;captionamp;quot;:amp;quot;amp;quot;,amp;quot;created_timestampamp;quot;:amp;quot;0amp;quot;,amp;quot;copyrightamp;quot;:amp;quot;amp;quot;,amp;quot;focal_lengthamp;quot;:amp;quot;0amp;quot;,amp;quot;isoamp;quot;:amp;quot;0amp;quot;,amp;quot;shutter_speedamp;quot;:amp;quot;0amp;quot;,amp;quot;titleamp;quot;:amp;quot;amp;quot;,amp;quot;orientationamp;quot;:amp;quot;0amp;quot;}"
                data-image-title="builtin_vs_dotnetwarp"
                data-image-description=""
                data-medium-file={imageSrc   "?w=300"}
                data-large-file={imageSrc   "?w=750"}
                src={imageSrc   "?w=10241"}
                alt={altText}
                srcSet={imageSrc   "?w=1024 1024w, "   imageSrc   "?w=705 705w, "   imageSrc   "?w=150 150w, "   imageSrc   "?w=300 300w, "   imageSrc   "?w=768 768w, "   imageSrc   "?1248w"}
                sizes="(max-width: 707px) 100vw, 707px" />
            <figcaption style={{ textAlign: "center" }}>{altText}</figcaption>
        </figure>
    );
}

И я использую этот рендерер, как показано ниже

 <ReactMarkdown source={blogResponse.data.content} escapeHtml={false} renderers={{ "code": CodeBlockRenderer, "image": ImageRenderer }} />

renderers={{ «code»: CodeBlockRenderer, «image»: ImageRenderer }} — это место, где вы упоминаете пользовательские средства визуализации.

Комментарии:

1. но я все еще не понимаю, как установить пользовательские h1...h6 теги заголовков.

2. Мне никогда не приходилось изменять заголовки. Можете ли вы поделиться своим кодом?

3. Я не обязательно должен, но я хочу использовать компонент заголовка пользовательского интерфейса Chakra. Я заглянул в документы по визуализации и обнаружил, что у него есть heading опция, но я не знаю, как различать h1 и h2. можете ли вы указать мне на лучшие документы по визуализации? repo: github.com/maximousblk/next-nest-test

4. Для заголовка реквизит будет иметь свойство с именем level , которое вы можете использовать для различения между h1, h2 ..h6. Пример кода можно найти здесь . github.com/Dhrutara/blogs.dhrutara.com.blogs/tree/main /…