Taro使用wxParse富文本组件

官方使用例子：Taro使用wxParse

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

下载wxParse， 并把它放在components文件夹中

新建富文本组件
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文件直接引入

在需要的地方引入并使用

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

总结

以上是生活随笔为你收集整理的Taro使用wxParse富文本组件的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。