Как использовать пользовательские компоненты в реакции-уценке

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

Теперь по умолчанию react-markdown (на основе remarkjs) использует HTML-тег <img> для уцененных изображений (![]()). Я хочу использовать новый компонент <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} />
}

то же самое и с другими элементами...


reactjs next.js markdown chakra-ui remarkjs
person Maximous Black    schedule 02.11.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

Компонент

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="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&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 }} — здесь упоминаются пользовательские средства визуализации.

person Ramesh Kanjinghat    schedule 02.11.2020
comment
но я до сих пор не понимаю, как установить пользовательские теги заголовка h1...h6. - person Maximous Black; 02.11.2020
comment
Мне никогда не приходилось изменять заголовки. Можете ли вы поделиться своим кодом? - person Ramesh Kanjinghat; 02.11.2020
comment
Мне не обязательно, но я хочу использовать компонент заголовка Chakra UI. Я просмотрел документы рендерера и обнаружил, что у него есть опция heading, но я не знаю, как отличить h1 от h2. можете ли вы указать мне лучшие документы рендерера? репозиторий: github.com/maximousblk/next-nest-test - person Maximous Black; 03.11.2020
comment
Для заголовка свойства будут иметь свойство, называемое level, которое вы можете использовать, чтобы различать h1, h2 ..h6. Вы можете найти пример кода здесь. github.com/Dhrutara/blogs. dhrutara.com.blogs/tree/main/ - person Ramesh Kanjinghat; 03.11.2020