我有一个注册页面的功能组件.我正在try 为这个组件声明props ,这样我就可以从另一个组件向它传递适当的值.这就是我要做的:

export default function SignupPage({mode = 'patient'} : {mode: 'patient' | 'doctor'}) {
 {/* CODE FOR SIGNUP PAGE HERE */}
}

如代码所示,我希望缺省值modepatient.它应该始终是patientdoctor中的一个.

当我用npm run dev运行这段代码时,一切都运行得很好.当我try 使用npm run build构建时,我收到以下错误:

- info Linting and checking validity of types ...Failed to compile.

app/signup/page.tsx
Type error: Page "app/signup/page.tsx" has an invalid "default" export:
  Type "{ mode: "patient" | "doctor"; }" is not valid.

我try 了多种方法,比如宣布interface分和mode: 'patient' | 'doctor';分的type分.它总是给出相同的错误.

如有任何帮助和指导,我们将非常感谢??

推荐答案

正如您在doc上看到的那样,app目录中page.tsx的默认导出类型只能类似于:

interface PageProps {
  params: { slug: string };
  searchParams: { [key: string]: string | string[] | undefined };
}
export default function Page({ params, searchParams }: PageProps) {
 // ...
}

paramssearchParams是您唯一可以提供的类型,它们将通过Next.js传递给您的组件.您不应该try 自己在另一个组件中调用页面.

如果你想要它,你应该把它转换成一个普通的组件,也许可以把它移到它自己的文件中,然后从那里导入到你想要的任何地方.

Javascript相关问答推荐

Promise.all立即跳到那时,而不是调用所有Promise

我可以后增量超过1(最好是内联)吗?

nPM审计始终发现0个漏洞

如何使用JavaScript动态地将CSS应用于ToDo列表?

如何指定1条记录1个表?

为什么JavaScript双边字符串文字插值不是二次的?

react 路由加载程序行为

React存档iframe点击行为

TypScript界面中的Infer React子props

被CSS优先级所迷惑

我应该绑定不影响状态的函数吗?'

如何在Obsidian dataview中创建进度条

CheckBox作为Vue3中的一个组件

在带有背景图像和圆形的div中添加长方体阴影时的重影线

变量的值在Reaction组件中的Try-Catch语句之外丢失

我创建了一个创建对象的函数,我希望从该函数创建的对象具有唯一的键.我怎么能做到这一点?

编辑文本无响应.onClick(扩展脚本)

对网格项目进行垂直排序不起作用

如何在Java脚本中对列表中的特定元素进行排序?

ComponentWillReceiveProps仍在React 18.2.0中工作