React+TypeScript环境下如何限制Steps组件仅接受Step作为子元素

问题原因 #

Children.toArray返回的子元素类型包含字符串、数字、React片段、Portal等多种类型，只有合法的React元素实例才拥有type属性，直接访问child.type会触发TS类型错误，需要先做类型收窄。

实现步骤 #

1. 给Step组件添加唯一识别的静态属性，避免和其他同名组件冲突：

// Step组件定义
import React from 'react'

interface StepProps {
  children: React.ReactNode
}

const Step: React.FC<StepProps> = ({ children }) => {
  return <div className="step-item">{children}</div>
}

// 添加静态标识，用于组件类型校验
Step.isStepComponent = true

// TS类型声明，避免静态属性报错
declare module 'react' {
  interface FunctionComponent {
    isStepComponent?: boolean
  }
}

export default Step

2. 在Steps组件中过滤子元素：

import React, { Children, isValidElement } from 'react'
import Step from './Step'

interface StepsProps {
  children: React.ReactNode
}

const Steps: React.FC<StepsProps> = ({ children }) => {
  const validSteps = Children.toArray(children).filter((child) => {
    // 第一步：先收窄类型，判断是否为合法React元素
    if (!isValidElement(child)) {
      console.warn('非Step类型的子元素将被忽略')
      return false
    }

    // 第二步：判断是否为Step组件
    const isStep = typeof child.type === 'function' 
      && !!(child.type as React.FC).isStepComponent

    if (!isStep) {
      console.warn('非Step类型的子元素将被忽略')
    }
    return isStep
  }) as React.ReactElement<React.ComponentProps<typeof Step>>[]

  // 后续直接使用validSteps渲染即可
  return <div className="steps-container">{validSteps}</div>
}

export default Steps

特殊场景兼容 #

如果你的Step组件是通过forwardRef封装的，需要调整判断逻辑：

// 对于forwardRef组件的校验逻辑
const isStep = typeof child.type === 'object'
  && child.type !== null
  && 'render' in child.type
  && typeof child.type.render === 'function'
  && !!(child.type.render as any).isStepComponent

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