uni-app 【uts】type类型属性hide是可选的函数，调用时提示报错

发布于 1周前 作者 itying888 来自 Uni-App

uni-app 【uts】type类型属性hide是可选的函数，调用时提示报错
类型是这样的

export type IMenuItem = {  
  title : string,  
  data : IMenuSubItem[],  
  iconSize ?: string,  
  badge ?: number[],  
  click ?: (item : IMenuSubItem, index : number) => void,  
  hide ?: () => boolean,  
}

调用后报错

18:15:09.815 error: Reference has a nullable type '(() -> Boolean)?', use explicit '?.invoke()' to make a function-like call instead‌  
18:15:09.815 at pages/tabbar/my.uvue:223:31  
18:15:09.815 221|   const menuList = computed(() => {  
18:15:09.815 222|    return MENU_LIST.filter((v) => {  
18:15:09.815 223|     return v?.hide == null || v.hide() == false;  
18:15:09.816    |                                 ^  
18:15:09.816 224|    });  
18:15:09.816 225|   });

Harmonyos Next教程
2 回复

已解决


在处理 uni-app 中 uts 组件的 type 属性及其 hide 可选函数时，如果遇到调用时提示报错的问题，首先需要确保你的 uts 组件使用方式和属性设置是正确的。uni-app 是一个使用 Vue.js 开发所有前端应用的框架，它支持编译为 H5、App、小程序等多个平台。

由于 uts 并不是 uni-app 官方组件库中的标准组件，我假设这是一个自定义组件或者来自某个第三方库。针对这个问题，以下是一个基于 Vue.js 的组件定义和使用的示例，用于说明如何处理可选属性和方法。

组件定义（假设为 UTSComponent.vue）

<template>
  <view v-if="!isHidden">
    <!-- 组件内容 -->
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  name: 'UTSComponent',
  props: {
    type: {
      type: String,
      default: 'default'
    },
    hide: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isHidden: this.hide
    };
  },
  methods: {
    toggleVisibility() {
      this.isHidden = !this.isHidden;
    }
  }
};
</script>

组件使用（在父组件中）

<template>
  <view>
    <UTSComponent :type="componentType" :hide="shouldHide" />
    <button @click="changeVisibility">Toggle UTSComponent Visibility</button>
  </view>
</template>

<script>
import UTSComponent from './UTSComponent.vue';

export default {
  components: {
    UTSComponent
  },
  data() {
    return {
      componentType: 'customType',
      shouldHide: false
    };
  },
  methods: {
    changeVisibility() {
      this.shouldHide = !this.shouldHide;
    }
  }
};
</script>

注意事项

  1. 属性传递：确保父组件正确传递 type 和 hide 属性到子组件。
  2. 错误检查：如果错误提示是关于 hide 属性的，检查是否在使用组件时未定义或类型不匹配。
  3. 控制台日志：在组件的 created 或 mounted 钩子中添加 console.log 来检查接收到的属性值。
  4. 条件渲染：如示例所示，使用 v-if 指令根据 hide 属性值控制组件的渲染。

如果以上代码结构和逻辑符合你的需求，但问题依旧存在，请检查 uts 组件的具体实现，可能是内部逻辑处理不当导致的错误。

回到顶部