Busque el Componente de una lista de componentes que contenga un determinado nombre de clase. En mi caso, quiero mostrar el componente que tiene el nombre de clase "bbb". Pero parece que no puedo encontrar el nombre de clase. En el siguiente código, hice mi ejemplo con el Nombre del componente solo para poder demostrar mejor lo que quiero lograr:
import React, { useState, useEffect } from 'react'; const Test = () => { const One = () => { return ( <h1 className='aaa' >one</h1> ) } const Two = () => { return ( <h1 className='bbb' >two</h1> ) } const Three = () => { return ( <h1 className='ccc' >Three</h1> ) } const [data, setdata] = useState([<One />, <Two />, <Three />]) return ( <section> {data.filter(x => x.type.name === 'One').map(x => { // something like this line below. This doesn't work of course // {data.filter(x => x.classList.contains('bbb)).map(x => { return <div>{x}</div> })} </section> ) }; export default Test;Soy realmente nuevo en React js, lo siento si esta es una pregunta estúpida.
Editar: Corregido un error tipográfico
En lugar de encontrar un nombre de clase para ese filtro, puede hacerlo de esta manera.
2 cosas clave en mis cambios:
const [data, setdata] = useState([One, Two, Three]) No debe llamar a <One/> (debajo del gancho, está llamando a React.createElement(One) para representar ese componente)
data.filter((Component) => Component === Two) Verifique la referencia del componente en lugar del nombre de la clase, porque el nombre de la clase puede cambiarse y causará un error en su lógica
import React, { useState, useEffect } from 'react' const Test = () => { const One = () => { return <h1 className="aaa">one</h1> } const Two = () => { return <h1 className="bbb">two</h1> } const Three = () => { return <h1 className="ccc">Three</h1> } const [data, setdata] = useState([One, Two, Three]) return ( <section> {data .filter((Component) => Component === Two) .map((Component) => { return ( <div> <Component /> </div> ) })} </section> ) } export default Test