Nextjs脚本标记不工作参考错误：未定义alertShow

pzfprimi 于 2023-03-18 发布在其他

关注(0)|答案(2)|浏览(200)

我尝试了很多次不同的方式，但它是显示相同的错误，请指导我。

import Head from 'next/head'
import Script from 'next/script'

export default function Home() {

  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <h1>hii</h1>
      <button onClick={alertShow}>Click Me</button>
      <Script src='../public/test.js'></Script>
    </>
  )
}

next.js

来源：https://stackoverflow.com/questions/72216584/nextjs-script-tag-not-working-referenceerror-alertshow-is-not-defined

2条答案

按热度按时间

jjhzyzn01#

你可以在logs中看到类似的东西。这是我的做法：
test.js文件：

window.alertShow = { myAlert: () => { alert('you clicked me'); } };

我的应用程序文件：

import React, { useState } from 'react';
import Script from 'next/script';
import '../styles/globals.css';

function MyApp() {
  const [scriptAlert, setScriptAlert] = useState();
  return (
    <>
      <Script
        src="/test.js"
        onLoad={() => {
          setScriptAlert(window.alertShow);
        }}
      />
      <button type="button" onClick={() => scriptAlert && scriptAlert.myAlert()}>Click Me</button>
    </>
  );
}

export default MyApp;

赞(0）回复(0）举报 2023-03-18

z9smfwbn2#

您可以使用dangerouslySetInnerHTML来绕过该错误，如下所示：

<div
  dangerouslySetInnerHTML={{
    __html: `<button onclick="alertShow()">Click me</button>`
  }}
/>

在本例中，dangerouslySetInnerHTML是安全的，因为我们传递的是一个硬编码值。

赞(0）回复(0）举报 2023-03-18

我来回答

Nextjs脚本标记不工作参考错误：未定义alertShow

2条答案

相关问题

热门标签

最新问答