回顾：服务器与客户端
本课属于 Coddy React 学习旅程的“Next.js 基础”单元。第 22 课，共 47 课。
挑战
中等章节回顾：自己划分服务器端和客户端的边界。
页面在服务器端列出菜品，但它也直接在按钮上添加了 onClick，因此应用根本无法渲染。在不将页面标记为客户端组件的情况下修复它：
- 在
components/OpenHours.jsx中，构建一个客户端组件（第 1 行使用'use client'），在状态中保存一个open布尔值，并渲染一个带有id="toggle"的按钮。按钮关闭时，文本必须是Show hours；打开时，文本必须是Hide hours。 - 打开时，还要渲染一个带有
id="hours"且文本为Open 9am-5pm的<p>。关闭时，该段落不能存在。 - 在
app/page.jsx中，将有问题的按钮和始终显示的段落替换为从'../components/OpenHours'导入的<OpenHours />。标题和菜品列表保持原样：页面仍然是服务器组件。
亲手试试
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}