Merge pull request #1668 from axetroy/list_item_jsx_params

feat: 修改 ListItem 参数 title/note/extraText 由 String 类型改为 JSX.Element

Author: robinv8

packages/taro-ui-docs/markdown/list.md

@@ -159,12 +159,12 @@ import { AtList, AtListItem } from "taro-ui"
 
 | 参数          | 说明             | 类型                                                                 | 可选值                 | 默认值  |
 | ------------- | ---------------- | -------------------------------------------------------------------- | ---------------------- | ------- |
-| title         | 元素的标题       | String                                                               | -                      | -       |
+| title         | 元素的标题       | JSX.Element                                                          | -                      | -       |
 | disabled      | 是否禁用         | Boolean                                                              | -                      | `false` |
-| note          | 元素的描述信息   | String                                                               | -                      | -       |
+| note          | 元素的描述信息   | JSX.Element                                                          | -                      | -       |
 | thumb         | 元素的主要缩略图 | String                                                               | -                      | -       |
 | arrow         | 箭头的方向       | String                                                               | `right`,`top`,`down` | -       |
-| extraText     | 额外信息的文本   | String                                                               | -                      | -       |
+| extraText     | 额外信息的文本   | JSX.Element                                                          | -                      | -       |
 | extraThumb    | 额外信息的缩略图 | String                                                               | -                      | -       |
 | isSwitch      | 额外信息是否开关 | Boolean                                                              | -                      | `false` |
 | switchColor   | 开关的颜色       | String                                                               | -                      | `#6190E8` |

packages/taro-ui/src/common/utils.ts

@@ -1,4 +1,5 @@
 import Taro from '@tarojs/taro'
+import React from 'react'
 import { SelectorQuery } from '@tarojs/taro/types/index'
 
 const ENV = Taro.getEnv()
@@ -255,6 +256,21 @@ function mergeStyle(
   return objectToString(style1) + objectToString(style2)
 }
 
+/**
+ * 自定义验证器，用于验证参数是否是 JSX.Element
+ * @param {any} props
+ * @param {string} propName
+ * @param {string} componentName
+ * @returns
+ */
+function isJSXElement(props, propName, componentName) {
+  if (!React.isValidElement(props[propName])) {
+    return new Error(
+      `Invalid prop ${propName} supplied to ${componentName}. It must be a valid JSX element.`
+    )
+  }
+}
+
 export {
   delay,
   delayQuerySelector,
@@ -266,5 +282,6 @@ export {
   handleTouchScroll,
   delayGetClientRect,
   delayGetScrollOffset,
-  mergeStyle
+  mergeStyle,
+  isJSXElement
 }

packages/taro-ui/src/components/list/item/index.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { Image, Switch, Text, View } from '@tarojs/components'
 import { CommonEvent, ITouchEvent } from '@tarojs/components/types/common'
 import { AtListItemProps } from '../../../../types/list'
-import { mergeStyle } from '../../../common/utils'
+import { mergeStyle, isJSXElement } from '../../../common/utils'
 
 export default class AtListItem extends React.Component<AtListItemProps> {
   public static defaultProps: AtListItemProps
@@ -43,10 +43,7 @@ export default class AtListItem extends React.Component<AtListItemProps> {
       switchIsCheck
     } = this.props
 
-    let { extraText, title } = this.props
-
-    extraText = String(extraText)
-    title = String(title)
+    const { extraText, title } = this.props
 
     const rootClass = classNames(
       'at-list__item',
@@ -156,16 +153,16 @@ AtListItem.defaultProps = {
 }
 
 AtListItem.propTypes = {
-  note: PropTypes.string,
+  note: isJSXElement,
   disabled: PropTypes.bool,
-  title: PropTypes.string,
+  title: isJSXElement,
   thumb: PropTypes.string,
   onClick: PropTypes.func,
   isSwitch: PropTypes.bool,
   hasBorder: PropTypes.bool,
   switchColor: PropTypes.string,
   switchIsCheck: PropTypes.bool,
-  extraText: PropTypes.string,
+  extraText: isJSXElement,
   extraThumb: PropTypes.string,
   onSwitchChange: PropTypes.func,
   arrow: PropTypes.oneOf(['up', 'down', 'right']),