AtListItem列表样式显示错误

[yangjisen]

问题描述

列表样式库显示错误

版本信息

taro-ui-vue3

涉及的平台

这个问题涉及到哪些平台，如：weapp, alipay, h5...

错误信息

代码

  <AtList>
    <AtListItem
      arrow='right'
      note='描述信息'
      title='我是字符串0'
      extraText='0'
    />
    <AtListItem
      arrow='right'
      note='描述信息'
      title='我是数字0'
      :extraText='0'
    />
  </AtList>

[b2nil]

第二个 AtListItem 绑定的 extraText 应为 string, 但你绑定的是数字 0（对应的 Boolean 值是 false），导致以 props.extraText 作为渲染条件的后续节点都没有渲染出来。

h(View, {
    class: 'at-list__item-extra item-extra'
}, {
    default: () => [
        props.extraText && ( // <-- 0 为 false，后面节点都不能渲染出来，item-extra__info 样式丢失
              h(View, {
                      class: 'item-extra__info'
              }, { default: () => props.extraText })
        ),
      ...
]})

浏览器 console 应该会报这样的错误，提示属性类型校验失败：

[Vue warn]: Invalid prop: type check failed for prop "extraText". Expected String with value "0", got Number with value 0.

[b2nil]

鉴于 0 是非常特殊的赋值，console 也会提示类型错误，因此不会修正这个误用属性类型的特殊问题。