官方使用例子：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富文本组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。