Tengo dos tipos de componentes, quiero que aparezcan en la pantalla al hacer clic en un botón, pero no es como mostrar y ocultar componentes, es más como generar un tema muchas veces. como si hago clic en el botón, puedo agregar más y más, así que si hago clic en el primer botón genera el componente 1 y cuando hago clic en el segundo botón agrega el segundo componente a la lista, etc.
No tengo idea de cómo lograr esto, pensé en almacenar los componentes en un estado y hacer un bucle de mapa, pero no estoy seguro de si esto es posible (almacenar los componentes en el estado) y si es una buena práctica.
Creo que tuve una situación similar al hacer un sitio web de resolución de matemáticas en el que quería mostrar la solución (Elemento JSX) cuando el usuario hace clic en el botón "resolver". No sé si esta es la mejor práctica, pero acabo de crear un SolutionObject con la siguiente interfaz mecanografiada:
interface SolutionObject { isSolved: boolean; solutionElement: JSX.Element; } Luego inicialicé el objeto de la solución usando el gancho useState() :
const [Solution, solved] = useState<SolutionObject>();Luego lo usé en mi componente React así
<div className="solution"> {Solution?.solutionElement} </div> {Solution?.isSolved ? <button onClick={closeBtn}>Close</button> : null} Para actualizar la solución, acabo de actualizar el objeto de la solución con el JSX en la propiedad solutionElement en una función de resolución con el JSX correcto para la solución paso a paso. Aquí hay un ejemplo:
solved({ isSolved: true, solutionElement: // prettier-ignore <div className="card"> <h2>Using Distance Formula</h2> <p> <Latex>{`$Distance\\ (D) = \\sqrt{(x_{2}-x_{1})^2 + (y_{2}-y_{1})^2}$`}</Latex> <br /><br /> <Latex>{`$D = \\sqrt{(${X2}-${X1})^2 + (${Y2}-${Y1})^2}$`}</Latex> <br /><br /> <Latex>{`$D = \\sqrt{(${X2 - X1})^2 + (${Y2 - Y1})^2}$`}</Latex> <br /><br /> <Latex>{`$D = \\sqrt{${(X2 - X1) ** 2} + ${(Y2 - Y1) ** 2}}$`}</Latex> <br /><br /> <Latex>{`$D = \\sqrt{${(X2 - X1) ** 2 + (Y2 - Y1) ** 2}}$`}</Latex> <br /><br /> <Latex>{`$D = ${formatSquareRoot((X2 - X1) ** 2 + (Y2 - Y1) ** 2).outer}\\sqrt{${formatSquareRoot((X2 - X1) ** 2 + (Y2 - Y1) ** 2).inner}}$`}</Latex> </p> </div>, }); No sé si esto es exactamente lo que está buscando, pero su pregunta suena similar. Supongo que puede usar esta idea para almacenar elementos JSX en un estado y representarlos en su componente. Si tiene una lista de elementos JSX, puede usar el tipo JSX.Element[] para ellos (si usa mecanografiado) y mapearlos
{items && items.map((Item, i) => ( <div key={i}> <Item /> </div> ))}Nuevamente, no tengo mucha experiencia con esto y no sé si es la mejor práctica, pero seguro que funciona.