Я использую gatsby для рендеринга страниц из уценки, и мне нужны мои компоненты реакции, объявленные в файлах .md, а также статический контент. Итак, я использую плагины gatsby-transformer-remark, gatsby-remark-component и remark-generic-extensions (для рендеринга HTML-тегов с пользовательскими классами и атрибутами). Синтаксис в markdown для реагирующего компонента действителен (<another-page></another-page>), и мой компонент отображается так, как должен. Но есть ошибка, которая возникает, когда я взаимодействую с радиовходами, которые отображаются как статические html. Поэтому, когда я щелкаю любое радио из группы, каждый раз, когда эта группа сбрасывается, и я должен дважды щелкнуть по ней, чтобы она заработала. Когда я удаляю слушателя click в инструментах разработчика, прикрепленных к библиотеке document с react-dom (также используется rehype), ошибка исчезает. Я предполагаю, что rehype-реагирует добавляет этот слушатель, потому что ранее я рендерил статический html без реагирующих компонентов (и без rehype-реагировать), используя dangerouslySetInnerHTML, и радиовходы работали нормально. Вот видео, описывающее мою проблему.
https://www.youtube.com/watch?v=5LAKSzApCcE
import RehypeReact from 'rehype-react'
import AnotherPage from './another-page'
const renderAst = new RehypeReact({
createElement: React.createElement,
components: {
"another-page": AnotherPage
}
}).Compiler
const IndexPage = ({ data }) => {
const { markdownRemark } = data
const { frontmatter, htmlAst } = markdownRemark
return renderAst(htmlAst)
};