¿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

August 1, 2023 at 10:27 pm

Para trabajar con props.children como un array, puedes utilizar la utilidad React.Children. Aquí tienes un ejemplo de cómo lograr lo que quieres hacer:

import React from 'react';
import styles from './ContentList.module.css';

interface ContentListProps {
  children: React.ReactNode;
}

const ContentList: React.FC<contentlistprops> = (props) => {
  const childrenArray = React.Children.toArray(props.children);

  // Creando un enlace relevante para cada contenido
  const list = childrenArray.map((child) => {
    if (React.isValidElement(child)) {
      return (
        <a classname="content-link" href="{`#${child.props.id}`}">
          {child.props.title}
        </a>
      );
    }
    return null;
  });

  // Renderizando cada contenido después de envolverlo dentro de un div apropiado
  const contents = childrenArray.map((child) => {
    if (React.isValidElement(child)) {
      return <div classname="content">{child}</div>;
    }
    return null;
  });

  return (
    <>
      <section classname="{styles.list}">{list}</section>
      <section classname="{styles.contentPanel}">{contents}</section>

  );
};

export default ContentList;

En este ejemplo, pasamos props.children a React.Children.toArray() para convertirlo en un array. Luego, podemos utilizar métodos estándar de array como map() para iterar sobre los elementos hijos. También utilizamos React.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 y title, por lo que es posible que necesites modificarlo para manejar otros tipos de elementos.

es.davy.ai

¿Tienes una pregunta?

¿Cómo se convierte ReactNode en un array?

Answer

davy.ai