Consider these components:

const Action = (props) => {
    return <div>Action</div>
}

const SpecialAction = (props) => {
    return <Action
        someProp={'someValue'}
    />
}

Now I'm being given an array of components, that are either Action or SpecialAction. And I want to extend them using React.cloneElement.

If I use this code:

const clonedActions = React.Children.toArray(actions)
.map(React.cloneElement(action, {
    additionalProp: 'additional prop value'
})

It won't affect Action components that are nested inside SpecialAction components.

I know I can refactor SpecialAction to pass the rest of the props:

const SpecialAction = ({specialProp1, specialProp2, ...rest}) => {
    return <Action
        {...rest}
        someProp={'someValue'}
    />
}

But I wonder if there is a way for me to not do that? Can I traverse the component hierarchy and add additional props to every Action component that I find?