'use client'
import { FieldErrors, FieldValues, UseFormRegister } from "react-hook-form";
import { BiDollar } from "react-icons/bi";
interface InputProps {
id: string;
label: string;
type?: string;
disabled?: boolean;
formatPrice?: boolean;
required: boolean;
register: UseFormRegister<FieldValues>;
errors: FieldErrors;
}
const Input: React.FC<InputProps> = ({
id,
label,
type = 'text',
disabled,
formatPrice,
required,
register,
errors
}) => {
return (
<div className="w-full relative">
{formatPrice && (
<BiDollar
size={24}
className="text-neutral-700
absolute
top-5
left-2
"
/>
)}
<input
id={id}
disabled={disabled}
{...register(id, { required })}
placeholder=""
type={type}
className={`
peer
w-full
p-4
pt-6
font-light
bg-white border-2
rounded-md
outline-none
transition
disabled:opacity-70
disabled:cursor-not-allowed
${formatPrice ? 'pl-9' : 'pl-4'}
${errors[id] ? 'border-rose-500' : 'border-neutral-300'}
${errors[id] ? 'focus:border-rose-500' : 'focus:border-neutral-300'}`
}
/>
<label
className={
`
absolute
text-base
duration-150
transform
-translate-y-3
top-5
origin-[0]
${formatPrice ? 'left-9' : 'left-4'}
peer-placeholder-shown:scale-100'
peer-placeholder-shown:translate-y-0
peer-focus:scale-75
peer-focus:-translate-y-4
${errors[id] ? 'text-rose-500' : 'text-zinc-400'}
`
}
>{label}</label>
</div>
)
}
export default Input;
类型“OmitwithTag
属性“id”与索引签名不兼容。 类型“string”不可分配给类型“never”。
类型错误:页面“app/components/Input/page.tsx”具有无效的“默认”导出: 类型“InputProps”无效。
注意:在本地主机上工作正常,在构建时出现错误。
文件名
app/components/Input/page.tsx
在 Next.js 中保留用于路由目的。例如,应用程序目录中的page.{js,jsx,ts,tsx}
会自动生成一条路线。在这种情况下,它将创建一条 /components/Input
路线,这可能是无意的。
因为它是 Next.js 保留文件,所以 Next.js 希望您仅导出一些特定的导出,例如默认组件,
runtime
、revalidate
、dynamic
等...
默认导出必须是接受
{ params, searchParams }
属性的 React 组件。在你的情况下,它接受 InputProps
,这是无效的。
我知道你的意思是制作一个可重用的组件而不是一条路线。因此您必须将此文件重命名为非保留名称。例如,将其命名为
Input.tsx
或 Input/index.tsx
,而不是 page
、layout
、route
、default
、template
、not-found
。
最好将额外的文件(例如组件)移到
app
目录之外,因为它只负责路由。
代替这个结构:
.
└── app
├── components
│ └── Input
│ └── page.tsx
├── login
│ └── page.tsx
└── register
└── page.tsx
就这样吧:
.
├── app
│ ├── login
│ │ └── page.tsx
│ └── register
│ └── page.tsx
└── components
└── Input
└── page.tsx
避免以后发生类似的冲突