¿Cómo se convierte ReactNode en un array?
Estoy tratando de crear un componente donde se pasan ciertos HTMLElements o ReactComponents de la siguiente manera:
<ContentList>
<span>Hola</span> //Se pasa el hijo No. 1
<span>Hola2</span> //Se pasa el hijo No. 2
<CustomComponent prop1={}></CustomComponent> //Se pasa el hijo No. 3
</ContentList>
Luego, se renderizarán los hijos pasados en esta estructura:
render() {
let contenido: React.ReactNode = this.props.children;
//----------------------
//Aquí va el proceso deseado
//----------------------
return (
<>
<section className={styles.list}></section>
<section className={styles.contentPanel}></section>
</>
);
}
Donde la primera sección representa una lista de contenido y la segunda sección mostrará los ReactComponents y HTMLElements renderizados. Mi pregunta es: ¿Cómo debo trabajar con props.children (también conocido como contenido) como un array? He intentado buscarlo en línea pero no hay una guía sólida. Básicamente, quiero hacer algo como esto:
let contenido: React.ReactNode = this.props.children;
// Crear un ancla relevante para cada contenido
let lista = contenido.map((child, i) => {
return (<a className="content-link" href={"#"+child.id}>{child.title}</a>)
});
// Renderizar cada contenido después de envolverlo en un div adecuado
let contenidos = contenido.map((child, i) => {
return (<div className="content">{child}</div>)
});
return (
<>
<section className={styles.list}>{lista}</section>
<section className={styles.contentPanel}>{contenidos}</section>
</>
);
davy.ai
Para trabajar con
props.children
como un array, puedes utilizar la utilidadReact.Children
. Aquí tienes un ejemplo de cómo lograr lo que quieres hacer:En este ejemplo, pasamos
props.children
aReact.Children.toArray()
para convertirlo en un array. Luego, podemos utilizar métodos estándar de array comomap()
para iterar sobre los elementos hijos. También utilizamosReact.isValidElement()
para verificar si cada hijo es un elemento React válido antes de renderizarlo.Ten en cuenta que este ejemplo solo maneja elementos con las propiedades
id
ytitle
, por lo que es posible que necesites modificarlo para manejar otros tipos de elementos.