Reactjs 如何为React.Children.map定义typescript

我有一个函数，可以查看提供的子元素，如果找到特定的元素类型，它会自动向其中添加一些属性

函数的调用方式如下：

render () {

    const { children, name, className } = this.props;

    return (
        <div className={className}>
            {this.enrichRadioElements(children, name)}
        </div>
    )
}

enrichRadioElements = (children: Array<any>, name: string) => (
    React.Children.map(children, child => {
        if (!React.isValidElement(child)) {
            return child;
        }

        //@ts-ignore
        if (child.props.children) {
            child = React.cloneElement(child, {
                //@ts-ignore
                children: this.enrichRadioElements(child.props.children, name)
            });
        }

        if (child.type === Radio) {
            return React.cloneElement(child, { 
                onChange: this.handleFieldChange,
                selectedValue: this.state.selectedValue,
                name: name
            })
        }
        else {
            return child;
        }
    })
)

---

它看起来有一个任意类型的“props”（如果我读得正确的话），但是typescript无法识别children属性。

问题在于两个方面。我首先将

children:Array

更改为

children:React.ReactNode

。您已经在那里签入了一个复选框，可以将类型从ReactNode缩小到ReactElement。诀窍是1。使用

isValidElement

和2中的泛型类型参数。使用带有类型赋值的新变量

elementType

，而不是处理和变异

子参数
EnrichedChildren
可能需要更新以匹配您的用例

interface EnrichedChildren {
  onChange(): void
  selectedValue: string
  name: string
  children?: React.ReactNode
}

enrichRadioElements = (children: React.ReactNode, name: string): any =>
  React.Children.map(children, child => {
    if (!React.isValidElement<EnrichedChildren>(child)) {
      return child
    }

    let elementChild: React.ReactElement<EnrichedChildren> = child
    if (child.props.children) {
      elementChild = React.cloneElement<EnrichedChildren>(elementChild, {
        children: this.enrichRadioElements(elementChild.props.children, name),
      })
    }

    if (elementChild.type === 'Radio') {
      return React.cloneElement(elementChild, {
        onChange: () => {},
        selectedValue: 'value',
        name: name,
      })
    } else {
      return elementChild
    }
  })

接口丰富了孩子们{
onChange（）：void
selectedValue:字符串
名称：string
子节点？：React.ReactNode
}
enrichRadioElements=（子项：React.ReactNode，名称：string）：any=>
React.Children.map（Children，child=>{
如果（！React.isValidElement（子项））{
返回儿童
}
让elementChild:React.ReactElement=child
if（child.props.children）{
elementChild=React.cloneElement（elementChild{
children:this.enrichRadioElements（elementChild.props.children，name），
})
}
if（elementChild.type==='Radio'）{
返回React.cloneElement（elementChild{
onChange:（）=>{}，
selectedValue:'值'，
姓名:姓名,，
})
}否则{
返回元素子对象
}
})

interface EnrichedChildren {
  onChange(): void
  selectedValue: string
  name: string
  children?: React.ReactNode
}

enrichRadioElements = (children: React.ReactNode, name: string): any =>
  React.Children.map(children, child => {
    if (!React.isValidElement<EnrichedChildren>(child)) {
      return child
    }

    let elementChild: React.ReactElement<EnrichedChildren> = child
    if (child.props.children) {
      elementChild = React.cloneElement<EnrichedChildren>(elementChild, {
        children: this.enrichRadioElements(elementChild.props.children, name),
      })
    }

    if (elementChild.type === 'Radio') {
      return React.cloneElement(elementChild, {
        onChange: () => {},
        selectedValue: 'value',
        name: name,
      })
    } else {
      return elementChild
    }
  })