Quiero recorrer mi función SliderComponent, con diferentes entradas, dentro del Html para crear varios componentes. Encontré esta solución en línea donde creamos una cadena y la devolvemos como Html, usando "id" y "getElementById", pero no puedo hacer que funcione.
export function GrommetButtonEx() { return ( <div> <Grommet theme={grommetTheme}> <Sidebar border={{ color: "grey", size: "medium" }} width="340px" background={{ color: "black", opacity: "strong" }} style={{ borderRadius: "15px" }} > <Accordion style={{ color: "grey" }}> <AccordionPanel style={{ height: "30px" }} label={ <Text color="white" weight="bold" size="small"> Joint Position </Text> } > <div id="output_div"></div> {/* This works <SliderComponent sliderName={"slider 5"} min={0} max={17} step={0.1} /> */} </AccordionPanel> </Accordion> </Sidebar> </Grommet> </div> ); } window.onload = function () { var outputHTML = ""; for (var k = 0; k < 5; k++) { outputHTML += '<SliderComponent sliderName={"slider ' + k + '"} min={0} max={17} step={0.1}'; } document.getElementById("output_div").innerHTML = outputHTML; };Recibí el siguiente error para:
TypeError: Cannot set properties of null (setting 'innerHTML')a:
document.getElementById("output_div").innerHTML = outputHTML;
¿Es esta la manera correcta de hacerlo, o hay una mejor manera?
Debe usar el gancho componentDidMount en lugar de onload .
componentDidMount() se invoca inmediatamente después de montar un componente (insertado en el árbol). La inicialización que requiere nodos DOM debe ir aquí (como en su caso).
Lea más sobre componentDidMount aquí:https://reactjs.org/docs/react-component.html#componentdidmount
En reaccionar, puede escribir Javascript dentro del "HTML" (Esto se llama JSX). No tiene que escribir ninguna lógica Javascript fuera del componente de la función.
Además, no tiene que usar innerHTML, sino que debe escribir en JSX (dentro del HTML) y hacer que devuelva una instancia del componente cada vez que se ejecuta el bucle.
Y para reemplazar el "onload" puedes usar un enlace llamadocomponentDidMount .
En cuanto a la cuestión de cómo escribir la lógica de bucle en JSX (dentro del HTML), aquí hay un enlace a una pregunta similar .