search

asasugar / HPRichText

hp-richtext, 是一个适用于 HarmonyOS Next 的富文本解析组件。
Apache License 2.0
40 stars 3 forks source link

请教一下，一个页面多个富文本字符串，如何动态设置各个RichTextOption的content为网络请求到的数据 #22

Closed TrcMiX closed 3 months ago

TrcMiX commented 3 months ago

现在这样做了一下封装，传一个富文本字符串进来就行，有没有什么跟优雅的方式能实现。 ` @Component export default struct H5Text { @State text: string = '' @State richTextOption: RichTextOption = { content: '', imageProp: { webp: true, } };

build() { HPRichText({ richTextOption: $richTextOption, needScroll: true, onLinkPress: (e) => { return e; } }) }

aboutToAppear(): void { this.richTextOption.content = this.text } }`

asasugar commented 3 months ago

现在这样做了一下封装，传一个富文本字符串进来就行，有没有什么跟优雅的方式能实现。 ` @component export default struct H5Text { @State text: string = '' @State richTextOption: RichTextOption = { content: '', imageProp: { webp: true, } };

build() { HPRichText({ richTextOption: $richTextOption, needScroll: true, onLinkPress: (e) => { return e; } }) }

aboutToAppear(): void { this.richTextOption.content = this.text } }`

感觉没必要多封装这一层组件，


import { HPRichText, RichTextOption } from '@ohasasugar/hp-richtext';

interface RichBuilder {
  richTextOption: RichTextOption
}

@Entry
@Component
struct Index {
  @State richTextOption1: RichTextOption = {
    content: '',
    imageProp: {
      webp: true,
    }
  };
  @State richTextOption2: RichTextOption = {
    content: '',
    imageProp: {
      webp: true,
    }
  };

  @Builder
  HPRichTextBuilder($$: RichBuilder) {
    if ($$.richTextOption.content) {
      HPRichText({
        richTextOption: $$.richTextOption,
        needScroll: true,
        onLinkPress: (e) => {
          return e;
        }
      })
    }
  }

  build() {
    Column() {
      Button('模拟请求接口 1，然后渲染富文本 1').onClick(() => {
        this.richTextOption1.content = '我是富文本 1'
      })
      Button('模拟请求接口 2，然后渲染富文本 2').onClick(() => {
        this.richTextOption2.content = '我是富文本 2'
      })
      this.HPRichTextBuilder({ richTextOption: this.richTextOption1 });
      this.HPRichTextBuilder({ richTextOption: this.richTextOption2 });
    }
  }
}
TrcMiX commented 3 months ago

现在这样做了一下封装，传一个富文本字符串进来就行，有没有什么跟优雅的方式能实现。 @component export default struct H5Text { @State text: string = '' @State richTextOption: RichTextOption = { content: '', imageProp: { webp: true, } }; build() { HPRichText({ richTextOption: $richTextOption, needScroll: true, onLinkPress: (e) => { return e; } }) } aboutToAppear(): void { this.richTextOption.content = this.text } }

感觉没必要多封装这一层组件，

import { HPRichText, RichTextOption } from '@ohasasugar/hp-richtext';

interface RichBuilder {
  richTextOption: RichTextOption
}

@Entry
@Component
struct Index {
  @State richTextOption1: RichTextOption = {
    content: '',
    imageProp: {
      webp: true,
    }
  };
  @State richTextOption2: RichTextOption = {
    content: '',
    imageProp: {
      webp: true,
    }
  };

  @Builder
  HPRichTextBuilder($$: RichBuilder) {
    if ($$.richTextOption.content) {
      HPRichText({
        richTextOption: $$.richTextOption,
        needScroll: true,
        onLinkPress: (e) => {
          return e;
        }
      })
    }
  }

  build() {
    Column() {
      Button('模拟请求接口 1，然后渲染富文本 1').onClick(() => {
        this.richTextOption1.content = '我是富文本 1'
      })
      Button('模拟请求接口 2，然后渲染富文本 2').onClick(() => {
        this.richTextOption2.content = '我是富文本 2'
      })
      this.HPRichTextBuilder({ richTextOption: this.richTextOption1 });
      this.HPRichTextBuilder({ richTextOption: this.richTextOption2 });
    }
  }
}

感谢。如果是在一个列表里呢，每个item都会有一个富文本的情况。