Soy nuevo en React y tengo algunas dificultades para intentar agregar un nuevo componente secundario a un componente que ya se ha renderizado.
Tengo un componente de aplicación que inicialmente contiene un componente principal (menú principal).
También tengo componentes Popover que quiero que aparezcan encima de Main cuando son hijos de <App> (y, por lo tanto, hermanos de <Main> ).
Estos componentes de Popover varían en número. Cada <Popover> puede contener botones que lanzan otro <Popover> sobre la parte superior nuevamente. Entonces la estructura sería como
<App> <Main></Main> <Popover></Popover> <Popover></Popover> ... </App> Sin embargo, cuando la página se carga por primera vez, no hay componentes Popover abiertos y <App> se representa sin ninguno. Aquí hay una versión simplificada de mi código:
class App extends React.Component{ constructor(props){ super(props) } render(){ return ( <div>{this.props.children}</div> ) } } class Main extends React.Component{ constructor(props){ super(props) } render(){ return ( //main menu stuff here ) } } ReactDOM.render(<App><Main /></App>, root); ¿Cómo puedo agregar nuevos <Popover> s a mi <App> cuando el usuario hace clic en algo? Antes de React, simplemente haría App.appendChild(Popover) , pero estoy bastante perdido aquí.
Debo agregar que los elementos en los que el usuario hará clic para activar un <Popover> inicial no están contenidos dentro de <Main> ; están fuera de <App> , ya que estoy tratando de hacer una transición lenta de mi página existente para usar React. Creo que esto podría ser parte de mi problema.
Básicamente, en React, tiene varias formas de hacer esto, pero para ser más confiable, necesita tener datos que representen los componentes dinámicos que representará en su DOM. Y para hacer esto, necesita crear un estado y una función que pueda agregar nueva información a su estado. Luego, simplemente compartiendo esta función con sus otros componentes, puede activarla desde donde quiera, y esto actualizará su estado, lo que aumentará la cantidad de componentes dinámicos que renderizará.
Echale un vistazo a éste ejemplo
import { useState } from "react"; export default function App() { const [popups, setPopups] = useState([]); const addNewPopup = () => { setPopups([...popups, { title: "I am a popup" }]); }; return ( <div className="App"> <ChildComponent onClick={addNewPopup} /> {popups.map((p) => { return <Popup title={p.title} />; })} </div> ); } function ChildComponent({ onClick }) { return ( <div> <p>I am a child component</p> <button onClick={onClick}>Add new element</button> </div> ); } function Popup({ title }) { return <div>I am a popup with title = {title}</div>; }