Como se ve en otra pregunta , es posible recorrer los elementos secundarios usando React.Children. mapa Estoy buscando una forma de recorrer recursivamente el árbol secundario ( props.children.props.children... ) y sustituir ciertos elementos con otro tipo de elemento . Ocurriría en la función de renderizado de un componente de orden superior.
¡Cualquier ayuda e ideas son muy apreciadas!
Puede crear un componente contenedor recursivo que reemplace cualquier elemento secundario que tenga y envuelva a sus elementos secundarios de la misma manera. El reemplazo continuará recursivamente hasta que los elementos secundarios no tengan más elementos secundarios.
Aquí hay un ejemplo de tal componente. Sustituye elementos <p> por elementos <span> .
const RecursiveWrapper = props => { const wrappedChildren = React.Children.map( props.children, child => { const type = child.type === 'p' ? 'span' : child.type if (child.props && child.props.children) { return React.cloneElement( { ...child, type // substitute original type }, { ...child.props, // Wrap grandchildren too children: ( <RecursiveWrapper> {child.props.children} </RecursiveWrapper> ) } ) } return child } ) return ( <React.Fragment> {wrappedChildren} </React.Fragment> ) }También puede usar la misma idea general para inyectar accesorios adicionales.