当访问react.dev
时,我很惊讶地说,create-react-app
不再被推荐用于React应用程序 Bootstrap 。
好吧,世界在变,让我们为我的第一个应用程序挖掘Next.js。
import Image from 'next/image'
import styles from './page.module.css'
export default function Home() {
function handleClick() {
console.log("Clicked me!");
alert("Clicked me!");
}
return (
<main className={styles.main}>
<div className={styles.description}>
<p>
Get started by editing
<code className={styles.code}>src/app/page.js</code>
</p>
<div>
TESTE
</div>
<button onClick={handleClick()}>Click me</button>
</div>
</main>
)
}
令人惊讶的是,我得到了以下错误:
Unhandled Runtime Error
Error: alert is not defined
我知道Next.js有服务器端渲染,但我不明白为什么我不能使用一个简单的警报来弹出浏览器消息。
看来我应该开始学习一些新的概念...
为什么我的警报在Next.js上是一个错误?
为什么我的console.log
不是在浏览器上而是在控制台上显示?
1条答案
按热度按时间63lcw9qa1#
首先,当设置
onClick
时,您正在调用handleClick()
。你应该传递它的引用:正如您所做的那样,在服务器上呈现组件时调用了该函数,这就是您得到该错误的原因。在执行上述操作后,您将得到一个新的错误:
如果您需要交互性,请考虑将其部分转换为客户端组件。
这是因为,在
app
目录中,默认情况下,Next.js使用服务器组件,其中JSX被编译为“纯HTML”并发送到浏览器,正如您可以在文档中阅读的那样:服务器组件允许开发人员更好地利用服务器基础设施。例如,以前会影响客户端上JavaScript包大小的大型依赖项可以完全保留在服务器上,从而提高性能。它们使编写React应用程序的感觉类似于PHP或Ruby on Rails,但具有React模板UI的功能和灵活性。
服务器组件不应包含特定于客户端的代码,例如单击处理程序。如果你需要,你应该在顶部添加
"use client"
,使其成为一个客户端组件: