Question

我正在使用gatsby从markdown渲染页面，我需要在.md文件中声明的react组件以及静态内容。因此，我正在使用gatsby-transformer-remark，gatsby-remark-component和remark-generic-extensions插件（用于渲染具有自定义类和属性的html标签）。 markdown中的react组件的语法有效（<another-page></another-page>），并且我的组件按应有的方式呈现。但是，当我与呈现为静态html的单选输入进行交互时，会发生一个错误。因此，当我单击组中的任何广播时，每次该组重置时，我都应单击两次以使其正常工作。当我在开发工具中删除了document库附加到react-dom的开发工具中的“ click”侦听器时（也被rehype所使用），该错误消失了。我猜想，rehype-react添加了此侦听器，因为以前，我使用dangerouslySetInnerHTML渲染了没有react组件（也没有rehype-react）的静态html，并且无线电输入正常。这是视频，描述了我的问题。 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)
};

错误，使用rehype-react渲染htmlAST时

0 个答案: