para las operaciones de Canvas Dom, incluí un archivo Vanilla JS con 'next/script' en mi archivo NextJs. <Script id="canvasJS" src="/lib/canvas.js" ></Script> Eso funciona bien hasta ahora. Ahora necesito pasar una variable como una ID del archivo NextJs al archivo Vanilla. Para onClick funciona bien con ()=>functionName(value) , pero no tengo idea de cómo pasar un valor sin la interacción del usuario.
Sería genial si alguien pudiera decirme cómo hacer eso.
gracias de antemano franco
El enfoque más fácil es leer window.__NEXT_DATA__.props.pageProps en su script vanilla js. El objeto son los accesorios hidratados que provienen del servidor y se pasarán al componente de su página.
Pero si yo fuera tú, usaría algo como esto.
import { useLayoutEffect } from 'React'; import Script from 'next/script'; export default function Component() { useLayoutEffect(() => { // do something you want to do with variable and external script },[]); return ( <> <Script src="/lib/canvas.js"/> </> ) } No estoy completamente seguro de lo que hace canvas.js . Probablemente podrías usar algo como esto. useLayoutEffect se ejecutará en el navegador después de la mutación DOM, por lo que el código dentro useLayoutEffect se ejecutará después de que se cargue el script.
Para obtener más detalles sobre next/script , puede leer esta página de documentos. https://nextjs.org/docs/basic-features/script
Ok, mi forma de hacerlo es usar el almacenamiento local.
En mi caso, compruebo la URL en busca de una ID de placa en una función getServerSideProps(ctx) y, si no se configura ninguna ID, creo una única.
Luego devuelvo los accesorios. En la función del lado del cliente, elijo la oferta de los accesorios y la escribo en el almacenamiento local:
Siguiente.js
if (typeof window !== "undefined") { localStorage.setItem('bid', bid) ; }Luego, en el archivo Vanilla JS, tomo la identificación por
Vainilla JS
const bid = localStorage.getItem('bid');