HarmonyOS鸿蒙Next中组件如何接受和处理联合类型的数据？

HarmonyOS鸿蒙Next中组件如何接受和处理联合类型的数据？ 有一个需求，写了一个自定义的Banner, 项目中有两个地方用到了这个Banner,但是两个地方用到的接口返回数据是不一致的，也就是BannerInfo 和 RightTop

作为一个公共组件，可以从在传入数据的时候将两个地方传入一致（进行数据转换），但是如果不想这样的话，我写了一个联合类型， [@Link](/user/Link) info: Array<BannerInfo> | Array<RightTop> 但是在渲染组件的时候，会报错

LazyForEach(this.data, (item: BannerInfo | RightTop) => {
Image(这里应该怎么写?)
}

如何解决这个问题？

import { BannerInfo, RightTop } from '../viewmodel/bean/HomePageBean'
import { ArrayList } from '[@kit](/user/kit).ArkTS'

class TestDataSource implements IDataSource {
private list: Array<BannerInfo> | Array<RightTop> = []

totalCount(): number {
return this.list.length
}

constructor(list: Array<BannerInfo> | Array<RightTop>) {
this.list = list
}

getData(index: number): RightTop| BannerInfo {
return this.list[index]
}

registerDataChangeListener(listener: DataChangeListener): void {
}

unregisterDataChangeListener(listener: DataChangeListener): void {

}
}

[@Component](/user/Component)
export struct Banner {
private swiperController: SwiperController = new SwiperController()

private data: TestDataSource = new TestDataSource([])
[@Prop](/user/Prop) bannerHeight: number = 100
[@Prop](/user/Prop) radius: number = 12
[@Link](/user/Link) info: Array<BannerInfo> | Array<RightTop>

aboutToAppear(): void {
this.data = new TestDataSource(this.info)
}

build() {
Swiper(this.swiperController) {
LazyForEach(this.data, (item: BannerInfo | RightTop) => {
Image()
.height(this.bannerHeight)
.width('100%')
.clip(true)
.borderRadius(this.radius)
}, (item: string) => item)
}
.cachedCount(2)
.index(1)
.autoPlay(true)
.interval(4000)
.loop(true)
.duration(1000)
.itemSpace(0)
.indicator( // 设置圆点导航点样式
new DotIndicator()
.bottom(5)
.right(12)
.itemWidth(4)
.itemHeight(4)
.selectedItemWidth(12)
.selectedItemHeight(4)
.color(0x80FFFFFF)
.selectedColor(Color.White)
)
.curve(Curve.Linear)
.onChange((index: number) => {
console.info(index.toString())
})
.onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => {
console.info("index: " + index)
console.info("current offset: " + extraInfo.currentOffset)
})
.onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => {
console.info("index: " + index)
console.info("targetIndex: " + targetIndex)
console.info("current offset: " + extraInfo.currentOffset)
console.info("target offset: " + extraInfo.targetOffset)
console.info("velocity: " + extraInfo.velocity)
})
.onAnimationEnd((index: number, extraInfo: SwiperAnimationEvent) => {
console.info("index: " + index)
console.info("current offset: " + extraInfo.currentOffset)
})

}
}

更多关于HarmonyOS鸿蒙Next中组件如何接受和处理联合类型的数据？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

联合类型数据渲染组件的时候，您可以加一个判断，看他是属于哪一种类型后再进行渲染，参考代码如下:

LazyForEach(this.data, (item: BannerInfo | RightTop) => {
  if( item instanceof BannerInfo ){
    Image(item.bannerName)
      .height(this.bannerHeight)
      .width('100%')
      .clip(true)
      .borderRadius(this.radius)
  }else if(item instanceof RightTop){
    Image(item.appletRedirectUrl)
      .height(this.bannerHeight)
      .width('100%')
      .clip(true)
      .borderRadius(this.radius)
  }
}

更多关于HarmonyOS鸿蒙Next中组件如何接受和处理联合类型的数据？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，组件接受和处理联合类型的数据通常通过TypeScript的类型系统来实现。联合类型允许一个变量具有多种类型，开发者可以在组件的属性定义中使用联合类型来接受不同类型的数据。

例如，假设有一个组件需要接受字符串或数字类型的数据，可以通过以下方式定义：

interface MyComponentProps {
  data: string | number;
}

const MyComponent: React.FC<MyComponentProps> = ({ data }) => {
  // 根据数据类型进行处理
  if (typeof data === 'string') {
    // 处理字符串类型数据
  } else {
    // 处理数字类型数据
  }

  return <div>{data}</div>;
};

在组件内部，可以通过typeof或instanceof等类型检查方法来区分不同的数据类型，并进行相应的处理。这种方式确保了组件能够灵活地处理多种类型的数据，同时保持类型安全。

此外，开发者还可以使用类型守卫（Type Guard）来进一步细化类型判断，确保在特定代码块中数据类型是确定的。例如：

function isString(data: string | number): data is string {
  return typeof data === 'string';
}

const MyComponent: React.FC<MyComponentProps> = ({ data }) => {
  if (isString(data)) {
    // 在此代码块中，data的类型被确定为string
  } else {
    // 在此代码块中，data的类型被确定为number
  }

  return <div>{data}</div>;
};

通过这些方式，HarmonyOS鸿蒙Next中的组件可以有效地接受和处理联合类型的数据。

在HarmonyOS鸿蒙Next中，组件可以通过TypeScript的联合类型（Union Types）来接受和处理多种类型的数据。例如，定义一个联合类型的属性：

interface MyComponentProps {
  data: string | number;
}

在组件内部，可以通过类型检查（如typeof或instanceof）来处理不同类型的数据：

function MyComponent({ data }: MyComponentProps) {
  if (typeof data === 'string') {
    // 处理字符串
  } else if (typeof data === 'number') {
    // 处理数字
  }
}

这种方式确保了组件能够灵活处理多种数据类型，同时保持类型安全性。

回到顶部