Tengo una página web que muestra una lista de botones y los componentes iframe correspondientes. Cada vez que se hace clic en un nuevo botón, se muestra un nuevo iframe y se elimina el existente.
Aquí está el componente iframe:
const IframeComp = ({ button }) => { return ( <iframe src={button}></iframe> ) } export default IframeComp Estoy cargando todos los iframes posibles, como cadenas, en una lista en app.jsx cuando la aplicación se carga así:
const [iframeComponents, setIframeComponents] = useState() useEffect(() => { function loadIframes() { let iframes = {} for (const iframeUrl of constants.buttonUrls) { const iframe = `<IframeComp button=${iframeUrl}></IframeComp>` iframes[iframeUrl] = iframe } setIframeComponents(iframes) } loadIframes() }, []); Y pasar los iframeComponents al archivo de página de visualización de iframe que verifica qué botón se presiona y representa el iframe apropiado. Por supuesto, los iframes se representan como cadenas en este momento. ¿Hay alguna manera de cargar/representar estos componentes de IframeComp en app.jsx como componentes/html reales, almacenarlos en una lista y luego simplemente mostrarlos en sentido descendente en función del clic del botón?
Alternativamente, he intentado usar la biblioteca html-react-parser para simplemente representar las cadenas como html en el archivo de página de visualización de iframe, pero esto no funciona ya que pone las cadenas en minúsculas, y también tendrían que tomarse un tiempo para procesar cada clic de botón.
¿Por qué no usar el componente directamente?
const [iframeComponents, setIframeComponents] = useState(); useEffect(() => { function loadIframes() { let iframes = {}; for (const iframeUrl of constants.buttonUrls) { const iframe = <IframeComp button={iframeUrl}></IframeComp>; iframes[iframeUrl] = iframe; } setIframeComponents(iframes); } loadIframes(); }, []);¿Cuál es su código real para cambiar iframe por botón?
Es un poco difícil ver lo que está pasando aquí sin ver dónde estás representando el iFrame, pero te indicaré dónde creo que puedes encontrar lo que estás buscando:
Representación condicional: https://reactjs.org/docs/conditional-rendering.html
Además, puede usar la función .map en una matriz en el renderizado de un componente de esta manera:
function Comp() { return ( <div> {['TestVal1', 'TestVal2'].map((val) => {return (<p>{val}</p>)})} </div> ) }