Estoy tratando de pasar el HTML interno del elemento Square a la función onClick. También intenté pasar solo i pero siempre es igual a 100. ¿Hay alguna forma de pasar i cuando es igual al mismo valor que entra en el cuadrado o hay alguna forma de pasar el código HTML interno a la función? Actualmente, este código genera el error: [TS: 2532]this is possibly undefined . Estoy haciendo una cuadrícula de 100 cuadrados, cada uno es un botón, y cada uno debe tener su propia ID/número del 1 al 100 para identificarlos. . Esto es lo que tengo actualmente: Grid de 100 cuadrados dispuestos en formación de 10x10
export const Square = (props:any) =>{ i += 1; if(i > 100) { i = 1; } return( <DefaultButton styles={factionMapButton} onClick={()=>onSquareClick(this.innerHTML,props.onClick)}>{i}</DefaultButton> ); } const onSquareClick = (number:any,isOpen:any) => { console.log(number); const panelContent = document.getElementById("panelContent"); if(panelContent !== null) { panelContent.innerHTML = number; } isOpen(); }Tienes bastantes problemas.
any en TypeScript, especialmente no liberalmente, eso anula todo el propósito de la verificación de tipos. Si está tratando de solucionar problemas de tipo, también debe comenzar escribiendo todo correctamente.this alteradas por el contexto de llamada. Si no hay una función envolvente completa, la function this in a arrow será el objeto global o undefined , los cuales son inútiles para usted. Use una function para capturar this o, mejor aún, use el objetivo actual del evento de clic para obtener una referencia al botón en el que se hizo clic..innerHTML de un elemento devuelve una cadena, no un elemento. Si contiene una cadena que se puede coaccionar a un número, coaccionarlo explícitamente a un número en su lugar. (Si el contenido HTML es solo la cadena que se puede forzar al número, debe usar .textContent en su lugar; solo use .innerHTML cuando configure o recupere deliberadamente el marcado HTML, no texto sin formato)i a onSquareClick en lugar de usar la manipulación DOM; usar el cierre es mucho más fácil let i = 1; export const Square = ({ onClick }: { onClick: () => void }) => { i += 1; if (i > 100) { i = 1; } return ( <DefaultButton styles={factionMapButton} onClick={(e) => { onSquareClick(i, onClick); }}>{i}</DefaultButton> ); }; const onSquareClick = (number: number, isOpen: () => void) => { const panelContent = document.getElementById('panelContent'); if (panelContent !== null) { panelContent.innerHTML = String(number); } isOpen(); };panelContent.innerHTML = number; - en su lugar, establezca el estado React que la vista usa para determinar qué debería existir en ese elemento. Algo como // Parent component: const [panelContentText, setPanelContentText] = useState(''); // expand as needed for the other components in your app... return <div id="panelContent">{panelContentText}</div> <Square setPanelContentText={setPanelContentText} /* and other props */ /> // ... // Then call the setPanelContentText prop in onSquareClick const onSquareClick = (number: number, isOpen: () => void, setPanelContentText: React.Dispatch<React.SetStateAction<string>>) => { setPanelContentText(String(number)); isOpen(); };Recomendaría consultar un tutorial introductorio de React, parece que podría beneficiarse al aprender el proceso dentro del ecosistema de React, en lugar de intentar mezclar su comprensión del DOM de Vanilla JS con React.