taro 渲染富文本，多个富文本切换

最新推荐文章于 2024-07-02 15:29:09 发布

阿之阿佐

最新推荐文章于 2024-07-02 15:29:09 发布

阅读量4.6k

点赞数

分类专栏： js react

本文链接：https://blog.csdn.net/u010214074/article/details/89347094

版权

js 同时被 2 个专栏收录

59 篇文章 0 订阅

订阅专栏

react

1 篇文章 0 订阅

订阅专栏

官网demo:

https://github.com/NervJS/taro-components-test/blob/master/src/pages/wxParse/wxParse.js

多个富文本切换，主要用到display:none,当显示的时候，重新生成富文本

import Taro, { Component } from "@tarojs/taro"
import { View } from "@tarojs/components"
import WxParse from "@/components/wxParse/wxParse"
import Tab from "@/components/productDetailTab"
import "./index.scss"

type PageOwnProps = {
  description: string,
  shoppingNotice: string
}

class productIntro extends Component<PageOwnProps> {
  state = {
    activeIndex: 0
  }
  static defaultProps = {
    description:'暂无数据',
    shoppingNotice:'暂无数据',
  }
  handleClick(active: number) {
    this.setState({
      activeIndex: active
    },()=>{
      if(active==0){
        WxParse.wxParse("description", "html", this.props.description, this.$scope, 0)
      }else {
        WxParse.wxParse("shoppingNotice", "html", this.props.shoppingNotice, this.$scope, 0)
      }
    })
  }

  componentDidMount() {
    WxParse.wxParse("description", "html", this.props.description, this.$scope, 0)
  }

  render() {
    const tabList: {active: number, name: string}[] = [
      { active: 0, name: '项目详情' },
      { active: 1, name: '购买须知' },
      { active: 2, name: '体验报告' }
    ]
    return (
      <View className='product-intro'>
        <import src='../../../components/wxParse/wxParse.wxml' />
        <Tab tabList={tabList}
             active={this.state.activeIndex}
             lineWidth={114}
             onChangeActive={this.handleClick}/>
        <View className={this.state.activeIndex===0?'product-intro__content':'product-intro__content hidden'}>
          <template is='wxParse' data='{{wxParseData:description.nodes}}'/>
        </View>
        <View className={this.state.activeIndex===1?'product-intro__content':'product-intro__content hidden'}>
          <template is='wxParse' data='{{wxParseData:shoppingNotice.nodes}}'/>
        </View>
        <View className={this.state.activeIndex===2?'product-intro__content':'product-intro__content hidden'}>
          暂无数据
        </View>
      </View>
    )
  }
}

export default productIntro