Reactjs overide типов уценки с реагировать-уценку

Question

Я использую содержательный, чтобы получить уценки к среагировать компонент, который использует реакцию-уценку для разбора Markdown

import ReactMarkdown from 'react-markdown'; 

    <Markdown source={text} /> 

бы я хотел сделать, это переопределить рендерер поэтому вместо из этого рендеринга ## как рендеринга h2 я могу передать пользовательский компонент, чтобы переопределить тип h2 по умолчанию для моего собственного компонента h2. Как я могу это сделать и есть и примеры?

Answer 1

Один из вариантов <ReactMarkdown> - renderers.

Один из common renderers обрабатывает заголовки. Если вы посмотрите на default rendering вы увидите это:

heading: function Heading(props) { 
    return createElement('h' + props.level, getCoreProps(props), props.children); 
}, 

Так проходят в собственном heading обработчика. Проверьте уровень внутри, примерно:

function CustomHeading(props) { 
    if (props.level !== 2) { 
    return createElement(`h${props.level}`, getCoreProps(props), props.children); 
    } 

    return <MyCustomElement {...props} /> 
} 

Если у вас нет доступа к коду, который commonmark реагирующими-визуализатор дает вам в контексте вашей функции (которые вы, вероятно, не будет), то вы бы также необходимо дублировать то, что дает вам createElement (но это просто).

---

Unrelated: Я никогда не использовал <ReactMarkdown> (но будет), но это заняло мне все три минуты исследования. Мой путь был следующим:

1. react-markdown страница
2. Отсканированные через раздел «Параметры», чтобы увидеть, если пользовательский рендеринг был тривиальным поддерживается
3. Найденный renderers вариант, который звучал многообещающе
4. Нажал the link предоставленные в документах этого опциона
5. Видел, что heading был одним из тех (что имело смысл, я ожидал бы рендеринга для каждого основного форматирования, поддерживаемого Markdown)
6. Открылись каталог src, чтобы увидеть, если реализация было легко найти
7. Там был только один файл, так что я открыл его
8. Искал страницу для «заголовок» и found it
9. вырезать и вставить код здесь

Умение читать документы и следить за тропами действительно важно.