Tengo un componente que representa todos los elementos secundarios que se le pasan como elementos de lista. Por ejemplo:

 // more or less the logic of my component const ListifyChildren = (props) => { return <ul>{props.children.map(element => <li>{element}</li>)}</ul> } // example use <ListifyChildren> <div>Some component</div> <div>Some other component</div> </ListifyChildren>

produciría

 <ul class="listify"> <li class="listify-list-item">Some component</li> <li class="listify-list-item">Some other component</li> </ul>

Pero el problema es que quiero poder usar HoC que devuelvan una lista de componentes y tratar esos componentes como elementos secundarios de mi lista real. Por ejemplo:

 const ReturnSomeStuff = () => { return [someArray].map(element => <div>{element}</div> } <ListifyChildren> <ReturnSomeStuff/> </ListifyChildren> //what I get: <ul class="listify"> <li class="listify-list-item"> <div>something</div> <div>something</div> <div>something</div> </li> </ul> //what I want to get: <ul class="listify"> <li class="listify-list-item">something</li> <li class="listify-list-item">something</li> <li class="listify-list-item">something</li> </ul>

¿Cómo puedo asegurarme de que mi componente se asigne sobre los niños html reales, no sobre las llamadas de función que se le pasan?