0

Tengo una aplicación en symfony a la que le he habilitado react para crear un aside que me cargue las opciones del usuario. Symfony me carga la página y la etiqueta aside es renderizada por react. El caso es que el aside se muestra bien pero tengo un evento onClick en un botón que no consigo que funcione, este es el código:

/*
 * app.js
 *
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */

// any CSS you import will output into a single css file (app.css in this case)
import './styles/app.scss';

// start the Stimulus application
import '@popperjs/core';
import 'bootstrap';
import 'datatables.net';

import React from 'react';
import ReactDOM from 'react-dom';

//Styles
import 'bootstrap/dist/css/bootstrap.min.css';

//Components
import Aside from './components/Aside.js';
//import reportWebVitals from './reportWebVitals';

//AQUI SE RENDERIZA MI COMPONENTE ASIDE
ReactDOM.render(
    <React.StrictMode>
        <Aside />
    </React.StrictMode>, 
    document.getElementById('aside')
);

import React from 'react';
import ReactDOM from 'react-dom';

import ProfileImage from './aside/profile_image';
import MenuAside from './aside/menuAside';
import AisdeBody from './aside/asideBody';
 
class Aside extends React.Component {
    constructor() {
        super();

        this.handleClick = this.handleClick.bind( this );
    }

    {/* Esto es el alert que debería mostrarse al pulsar el botón */}
    handleClick() {
        alert( "hello world" );
    }

    render() {
        return (
            <div className='modal-user-container'>
                <div className='modal-user-container__no-aside'></div>
                <aside className="aside-web">
                    <div className='aside-web__header d-flex justify-content-between align-items-center'>
                        <p className='aside-web__header-title'>Profile</p>
                        <i className="bi bi-x-lg aside-web__close-icon"></i>
                    </div>

                    <ProfileImage />

                    <AisdeBody />

                    {/* Este es el botón del evento */}
                    <button onClick={() => this.handleClick()}>Pulsar</button>
                </aside>
            </div>
        );
    }
}

export default Aside;

El caso es que si creo una aplicación react con npx create-react-app name-app, con el mismo código, al pulsar el botón se muestra el alert perfectamente.

Por otra parte he instalado la extensión React Developer Tools para chrome y en el apartado components se me muestra el siguiente error:

Uncaught Error: Cannot add child "57" to parent "55" because parent node was not found in the Store.

Si creo la aplicación con react desde 0 no obtengo este error, pero no se si es de react o de la propia extensión de chrome ya que no encuentro información útil sobre esto y estoy bastante perdido, estoy intentando crear la aplicación con symfony y crear solo algunos componentes con React pero no se si estoy trabajando de la manera más adecuada.

Comentar que los archivos app.js y aside.js están dentro de la carpeta assets que instala el webpack encore de symfony y app.js al compilarse da como resultado un app.js en la carpeta public/buid que es el que cargo en mi base.html.twig aunque repito que el componente se muestra bien pero no funciona el botón.

6
  • Intenta pasar el método así onClick={this.handleClick}
    – g.4
    el 19 mar. 2022 a las 17:54
  • Obtengo el mismo resultado, no ocurre nada al hacer click en el botón @g.4 el 19 mar. 2022 a las 18:53
  • Ahora agrega props al constructor asi: constructor(props){super(props);}
    – g.4
    el 19 mar. 2022 a las 19:46
  • Nada, sigo con el mismo problema. No estoy seguro que sea problema de código ya que en una aplicación hecha de 0 con react funciona bien. ¿Tal vez problema de integración con symfony por algo que se me escapa? @g.4 el 20 mar. 2022 a las 15:53
  • Ok, veo que mencionas que la aplicación hecha con react funciona, pero la que funciona es la que estas creando con el template create-react-app ¿No es asi? me parece que la otra app de react la estas creando de forma manual, si es así me pregunto si ya integraste el plugin de Babel.
    – g.4
    el 21 mar. 2022 a las 17:36

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.