React Native用react-native-render-html渲染katequation类MathJax公式问题

问题原因 #

• 你自定义的div渲染器没有做类名过滤，所有div都会被拦截重写，且你直接调用了全局的data.source.html，该变量存储的是整页HTML内容，不是当前节点的内部内容。
• 你导入的domNodeToHTMLString工具可以直接提取当前dom节点的内部内容，无需调用全局数据。

修复代码 #

你只需要替换htmlProps中renderers的div渲染逻辑即可，其余原有配置保持不变：

const htmlProps = {
  alterNode,
  alterData,
  WebView,
  renderers: {
    table,
    div: (children, htmlAttribs, passProps, data, domNode)  => {
      // 仅匹配class包含katequation的节点
      if (htmlAttribs.class?.includes('katequation')) {
        // 提取当前div内部的HTML内容，不包含外层div标签
        const equationContent = domNodeToHTMLString(domNode, { includeOuterTag: false })
        return(
          <View> 
            <MathJax html={equationContent} style={{backgroundColor:'red'}}/> 
          </View>
        )
      }
      // 非公式节点走默认渲染逻辑
      return passProps.DefaultRenderer()
    },
  },
  // 剩余原有配置保持不变
  ignoredTags: IGNORED_TAGS,
  renderersProps: {
    // 原有表格配置不变
    ...
  },
  ...
}

补充说明 #

• 如果公式节点不是div标签，可新增对应标签的渲染器，复用上述判断逻辑即可。
• 若react-native-mathjax渲染长公式出现截断问题，可以给MathJax组件外层添加横向滚动的ScrollView适配。

内容的提问来源于stack exchange，提问作者Aman Saxena