关于taro3+react hooks开发微信小程序渲染markdown的问题及解决办法使用taro3框架和react

1. 问题场景

开发小程序的时候，有个页面需要展示相关的用户使用声明，不是隐私声明，所以想着自己页面内渲染，但由于声明文本过长，所以选择渲染markdown

2. 探索路程

开始在网上搜索，尝试了很多库，比如taro-parse、taro_rich_text、taro-wxparse、wxparse等组件库
尝试过程中各种报错，各种问题，完全无法渲染，最后在Q群某个大佬的提点下找到了解决思路
由于是编译到微信小程序端，所以如果直接使用的外部react组件，基本都有问题，加上上面提到的，以及网上搜索到，大部分react渲染markdown组件库都是很多年前的，不仅如此，兼容taro框架的也是多年前的，所以抛弃组件的路子，想着将markdown转换为纯html来渲染

3. 解决办法

使用 react-remarkable 库
npm install --save react-remarkable
页面的组件代码

import { View } from '@tarojs/components'
import MarkDownComponent from 'react-remarkable'
import './statement.scss'

export default function Statement() {
  const mdContent = `> **尊敬的用户：**
    > 感谢您选择在我们的平台上传视频和生成弹窗选择题。在您进行上传操作之前，请仔细阅读并理解以下声明：

    **1. 内容合法性**
    - 您保证所上传的视频内容及生成弹窗选择题（包括视频，设定的问题和答案）遵守所有适用的法律、法规和规章，不包含任何违法、淫秽、暴力、欺诈、侵权、诽谤、侮辱或其他不良信息。
    - 您确认拥有上传视频内容的完整权利，包括但不限于版权、商标权、隐私权等，并且该上传行为未侵犯任何第三方的合法权益。

    **2. 准确性和真实性**
    - 您保证所上传视频的描述、标题和相关信息准确且真实。`

  return (
    <View className='statement'>
      <MarkDownComponent>{mdContent}</MarkDownComponent>
    </View>
  )
}

这样子还不行，编译到微信小程序后，打开控制台审查元素会发现类名都是清一色的h5开头

并且界面显示出来的也是没有任何样式的白板

所以这个时候还差样式，这里我使用的是 markdown-css-themes ，有很多样式可以选择，由于需求仅仅需要展示即可，所以就选择了少一点的，复制粘贴到页面的 statement.scss 文件，然后在类前面添加上 .h5- 这个类名前缀，再一次重新编译，即可展示正常效果

4. 总结

网上的那些都是多年前的，并且多年前从未有人去总结，都喜欢使用组件，然而组件总得考虑多平台的编译兼容问题
以后关于markdown的场景，无需管框架，只要使用纯函数解析markdown文本为html树，最后在套上喜欢的样式，即可，样式还可以随心切换，这才是正道的光~！