Solución alternativa para agregar className a Fragment en React

Solución:

Los fragmentos le permiten agrupar una lista de niños sin agregar nodos adicionales al DOM. – https://reactjs.org/docs/fragments.html

Lo que Fragments intenta resolver son los elementos dom innecesarios, pero esto no significa que Fragments reemplazará div enteramente. Si necesita agregar un className allí, está claro que o agrega un elemento dom en este caso otro div o agregue la clase a su padre.

Utilizando Fragment significa no agregar un nodo adicional al DOM.

Si desea asignar un className a un nodo, entonces tendrás que usar div.

1. Cree un archivo css e impórtelo dentro de su App.js
2. Cree un componente de orden superior con Class.js como se muestra a continuación

    import React from  'react';
    
    const withClass = (WrappedComponent, className) => {
        return props => (
            <div className={className}>
                <WrappedComponent {...props} />
            </div>
        );
    };
    
    export default withClass;

3. Importa tu hoc también.
4. En su App.js escriba algo como a continuación

    <React.Fragment>
        <p>Some JSX code here</p>
    <React.Fragment>
    
    export default withClass(App, classes.App);

Creé la clase .App dentro de mi archivo css y la importé para poder usarla más tarde con classes.App. De esta manera, puede aplicar cualquier clase css que cree dentro de su css. Puede usar el mismo componente contenedor para envolver cada componente que tiene, simplemente importándolo y cambiando la exportación en su componente. Solo tiene que hacer el nombre de clase de su elección y usarlo en la declaración de exportación de su componente. Cuando escribe accesorios con el operador de propagación (…). Todos los accesorios de su componente se pasarán a este componente contenedor.

PD: el inglés no es mi lengua materna, así que no soy bueno para explicar, pero este código funcionará. Agradecería que un moderador echara un vistazo a mi explicación.

---

---

Utiliza Nuestro Buscador