Taro使用wxParse富文本组件

官方使用例子：Taro使用wxParse

项目开发主要使用的ts， 但是ts直接在标签中import可能会报错， 于是按照官方给的示范例子， 单独封装成一个富文本组件。

1. 下载wxParse， 并把它放在components文件夹中
   
2. 新建富文本组件
   wxParseComponent.js文件

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'

import Parse from '@/components/wxParse/wxParse.js'

import './wxParse.scss'


// let data = null;
export default class ParseComponent extends Component {
  componentDidMount() {
    if (this.props.data) {
      const {data} = this.props;
      Parse.wxParse('data', 'html', data, this.$scope, 5);
    }
    // data = '<div style="color: red">我是HTML代码</div>'
    // Parse.wxParse('data', 'html', data, this.$scope, 5)
  }

  

  render() {
    return (
      <View>
        <import src='../../../components/wxParse/wxParse.wxml' />
        <template is='wxParse' data='{{wxParseData:data.nodes}}' />
      </View>
    )
  }
}

scss文件其实就是引入wxParse的scss文件， 也可以在wxParseComponent.js文件直接引入

3. 在需要的地方引入并使用

import ParseComponent from './wxParse/wxParseComponent.js' // 引入

            <View>
              {process.env.TARO_ENV === 'weapp' ? (
                <ParseComponent data={product.description} />
              ) : (
                <View>只在小程序里支持</View>
              )}
            </View> // 使用