TypeScript中如何为React组件的子元素添加专属自定义shown属性？

方案思路 #

通过自定义SectionScrollList的children类型，仅在该组件的子元素类型定义中注入可选shown属性，既不污染全局原生组件类型，也能满足子元素可合法传入shown的需求。

实现代码 #

import React, { type ReactElement, type ComponentProps, Children, isValidElement } from 'react'
// 若为Web端DOM场景，替换为对应的原生组件类型即可
import { type View } from 'react-native'

// 1. 定义允许携带shown属性的子元素类型
// 方案A：支持任意组件作为子元素，均可传入shown属性
type SectionScrollChild<P = Record<string, any>> = ReactElement<P & {
  shown?: boolean
}>

// 方案B（可选）：仅允许View作为子元素，收窄类型范围
// type SectionScrollChild = ReactElement<ComponentProps<typeof View> & {
//   shown?: boolean
// }>

// 2. 定义SectionScrollList的Props类型
interface SectionScrollListProps {
  children: SectionScrollChild | SectionScrollChild[]
  // 此处可补充你的组件其他原生属性
}

// 3. 组件实现
const SectionScrollList: React.FC<SectionScrollListProps> = (props) => {
  // 原有筛选逻辑可正常读取shown属性，无类型报错
  const validChildren = Children.toArray(props.children)
    .filter(child => isValidElement(child) && child.props.shown !== false)

  // 你的组件原有渲染逻辑...
  return <>{validChildren}</>
}

效果说明 #

1. 在SectionScrollList内部写子元素时，TS会允许合法传入shown属性，不会报「属性不存在于原生组件Props」的错误
2. 脱离SectionScrollList使用原生组件时，shown属性依然会被TS判定为非法属性，符合不污染全局类型的要求
3. 无需修改任何全局类型定义，仅作用于SectionScrollList组件本身

内容的提问来源于stack exchange，提问作者Archimedes Trajano