如何给children里的每个元素加上自定义属性

使用到的api:

  • React.cloneElement
  • React.Children.toArray(props.children)
import React, { isValidElement } from 'react'
 
export const ParentComponent = (props: JGJCardProps) => {
    // 给子元素注入wrapperType属性,方便子元素自定义其在card里面的样式
    const injectWrapperType = (node: React.ReactNode) => {
        if (!isValidElement(node)) return node
        return React.cloneElement(node, { ...node.props, wrapperType: props.jgjType })
    }
    return (
        <View>
            {React.Children.toArray(props.children).map(injectWrapperType)}
        </View>
    )
}