React是一个用于构建用户界面的JavaScript库。它使用声明范式，旨在既高效又灵活。
我想在本地构建应用程序，但我不能总是相同的： 发生错误的预处理页面“/_not-found”。阅读更多：https：//nextjs.org/docs/messages/prerender-error 错误：元素类型是我...
如何更改MUI AutoComplete Select的轮廓和标签颜色。 我尝试通过SX属性更改许多样式，但似乎没有任何作用。如您所见，我只想将所有颜色设置为黑色。 截屏
Screenshot sx 我认为您还需要应用针对Textfield的样式。根据您的屏幕截图，这就是缺少的部分。 <Autocomplete disablePortal options={top100Films} sx={{ width: { sm: "100%", md: 340 }, // ALTERNATIVE 1 "& .MuiSvgIcon-root": { color: "black", }, ".MuiOutlinedInput-notchedOutline": { borderColor: "black", }, "&:hover .MuiOutlinedInput-notchedOutline": { borderColor: "black", borderWidth: "thin", }, "&.Mui-focused .MuiOutlinedInput-notchedOutline": { borderColor: "black", borderWidth: "thin", }, "&.MuiOutlinedInput-root": { "& fieldset": { borderColor: "black", }, "&:hover fieldset": { borderColor: "black", }, "&.Mui-focused fieldset": { borderColor: "black", }, "&.MuiInputLabel-shrink": { color: "black", }, }, }} renderInput={(params) => ( <TextField {...params} label="Movie" /> )} />```
pdf-lib.js field.constructor.name return builded
const pdfDoc = await PDFDocument.load(formPdfBytes); // Register the `fontkit` instance pdfDoc.registerFontkit(fontkit); // Embed our custom font in the document const customFont = await pdfDoc.embedFont(fontBytes, { subset: true }); // Get the form containing all the fields const form = pdfDoc.getForm(); const fields = form.getFields() fields.forEach(field => { //HERE THE PROBLEM!! const type = field.constructor.name // GOT "t" const name = field.getName();
eRROR：“分配表达式的左侧必须是变量或属性访问”。 我在我的代码中遇到以下错误： 错误：x分配表达式的左侧必须是变量或属性访问。 这是相关代码： const
Error：x分配表达式的左侧必须是变量或属性访问。
如何正确管理ShadCn中的切换状态？ 我在我的React项目中使用SADCN的切换组件来实现一组冲程切换。目的是要有四个切换，一次只能一个可以活跃（按下）。当切换...
type StrokeToggleType = "stroke-none" | "stroke-solid" | "stroke-dash-1" | "stroke-dash-2"; ... const [strokeToggle, setStrokeToggle] = useState<StrokeToggleType>("stroke-none") const handleToggleChange = (type: StrokeToggleType) => { setStrokeToggle(type) } ... return ( <div className='flex justify-between'> <Toggle aria-label="stroke-none" pressed={strokeToggle === "stroke-none"} onPressedChange={() => handleToggleChange("stroke-none")} > <AiOutlineStop className='w-[56px] h-[40px]' /> </Toggle> <Toggle aria-label="stroke-solid" pressed={strokeToggle === "stroke-solid"} onPressedChange={() => handleToggleChange("stroke-solid")} > <GoDash className='w-[56px] h-[40px]' /> </Toggle> <Toggle aria-label="stroke-dash-1" pressed={strokeToggle === "stroke-dash-1"} onPressedChange={() => handleToggleChange("stroke-dash-1")} > <CgBorderStyleDashed className='w-[56px] h-[40px]' /> </Toggle> <Toggle aria-label="stroke-dash-2" pressed={strokeToggle === "stroke-dash-2"} onPressedChange={() => handleToggleChange("stroke-dash-2")} > <AiOutlineSmallDash className='w-[56px] h-[40px]' /> </Toggle> </div> ); };
功能应用程序（）{ 返回 （ <> function App() { return ( <> <div style={{ width: "100vw", height: "100vh", display: "flex", alignItems: "center", justifyContent: "center", backgroundColor: "black", }} > <Logo3 /> </div> </> ); } 应用程序与上述一样简单。背景应该是黑色的，但有时有一个初始的白屏，在加载应用程序之前出现了一秒钟。如何预防这个白屏？ 因此，最简单的方法是为您的HTML文件内的页面主体设置背景颜色。这样，有初始的背景颜色，当（重新）加载网站时，您将不会体验到Flash。 <style> body { background-color: black; } </style> 另一个更复杂的解决方案是使用服务器端渲染。 这个想法是让服务器提供DOM的初始版本。 加载和评估所有JavaScript代码后，该DOM将被React扩散和更改。 看一下 ReactDOMServer.renderToString(reactElement) 和ReactDOM.hydrate() 如果您正在使用节点backend。 我认为below是一种更干净的方式，只需转到您的index.html文件或您的React应用程序所使用的任何内容，然后在初始<html .. />tag中添加样式标签 取代＃111与您喜欢的深色。 e.g. <html lang="en" style="background-color: #111"> 随着您的应用程序样式的加载，这将被覆盖。
我正在尝试在CloudFlare页面上部署我的Vite+React应用程序，它显示了
Cloudflare页面使用旧版本的节点JS，该版本不支持此语法。 您可以通过在构建设置中设置Node_version Environnement变量来更改它。
themetoggler.tsx
API端点404在生产的NextJs 14上找不到，但在Local
建立一个小网站。 在我的网站上，我有一个小的联系我们页面。 我在我的getintouch.tsx中有以下内容 <Formik initialValues={{ fullName: "", phoneNumber: "", email: "", message: "", }} validationSchema={Yup.object({ fullName: Yup.string().required("Required"), phoneNumber: Yup.string().required("Required"), email: Yup.string() .email("Invalid email address") .required("Required"), message: Yup.string().required("Required"), })} onSubmit={async (values, { setSubmitting, resetForm }) => { try { const response = await fetch("/api/sendEmail", { // Adjusted path here method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(values), }); if (!response.ok) { throw new Error("Failed to send email"); } setShowSuccessMessage(true); setTimeout(() => { setShowSuccessMessage(false); }, 5000); resetForm(); } catch (error) { console.error("Error sending email:", error); } finally { setSubmitting(false); } }} > {(formik) => ( <Form > <div className="pb-3"> <Field type="text" name="fullName" placeholder="Full Name" className="form-input space-y-2 pt-15px lg:pt-20px w-full h-12 px-5 py-10px placeholder-white text-white" style={{ backgroundColor: '#0c3863',border: '1.5px solid white'}} /> <ErrorMessage name="fullName" component="div" className="text-red-600" style={{color: "red"}} /> </div> <div className="pb-3"> <Field type="text" name="phoneNumber" placeholder="Phone Number" className="form-input space-y-2 pt-15px lg:pt-20px w-full h-12 px-5 py-10px placeholder-white text-white " style={{ backgroundColor: '#0c3863',border: '1.5px solid white'}} /> <ErrorMessage name="phoneNumber" component="div" className="text-red-600" style={{color: "red"}} /> </div> <div className="pb-3"> <Field type="email" name="email" placeholder="Email" className="form-input space-y-2 pt-10px lg:pt-15px w-full h-12 px-5 py-10px placeholder-white text-white" style={{ backgroundColor: '#0c3863',border: '1.5px solid white'}} /> <ErrorMessage name="email" component="div" className="text-red-600" style={{color: "red"}} /> </div> <div className="pb-3"> <Field as="textarea" name="message" placeholder="Message" className="form-textarea w-full pt-15px lg:pt-20px placeholder-white px-5 py-30px text-white" style={{ backgroundColor: '#0c3863',border: '1.5px solid white'}} /> <ErrorMessage name="message" component="div" className="text-red-600" style={{color: "red"}} /> </div> <Button type="submit" disabled={formik.isSubmitting} className="btn" size={"large"} colorTheme="blue1" uppercase > Enquire now </Button> </Form> )} </Formik> {showSuccessMessage && ( <div className="success-message flex items-center text-white text-sm font-bold py-3" > Message sent successfully! </div> )} </div> 在我的页面/API中，我有sendemail.ts file 现在我正在使用mailtrap. import { NextApiRequest, NextApiResponse } from 'next'; import nodemailer from 'nodemailer'; export default async function handler(req: NextApiRequest, res: NextApiResponse) { if (req.method !== 'POST') { return res.status(405).end(); // Method Not Allowed } try { const { fullName, phoneNumber, email, message } = req.body; const transporter = nodemailer.createTransport({ host: 'sandbox.smtp.mailtrap.io', port: 2525, auth: { user: '543c2217cf0f8b', pass: '5rthae759cd4c0', }, }); await transporter.sendMail({ from: '[email protected]', to: '[email protected]', subject: 'New contact form submission', html: ` <p>Full Name: ${fullName}</p> <p>Phone Number: ${phoneNumber}</p> <p>Email: ${email}</p> <p>Message: ${message}</p> `, }); res.status(200).json({ message: 'Email sent successfully' }); } catch (error) { console.error('Error sending email:', error); res.status(500).json({ error: 'An error occurred while sending the email' }); } } 当我在本地测试时，它可以完美地完成表单验证并发送电子邮件。 我在我的实时服务器上没有任何更改。 但是，每当我试图将其转移到我的生产中，它都会给我mydomain.com/api/sendEmail not found. 由于我是Nectjs的新手，我正在努力寻找问题在哪里... 首先，您可以提供您遇到的错误，而我的猜测是文件名，请尝试在生产服务器上进行仔细检查。 TROTY测试如果使用Postman存在终点，并且如果不是终点，则可能只是文件名[sendemail.ts]。 您找到解决方案吗？有同样的问题。
function Course(props) { return ( <div className={Styles.card}> <img src={props.image} alt="" /> <h2>{props.name}</h2> <p>{props.price}</p> </div> ); } Course.defaultProps = { image: image1, name: "Default Course", price: "1 Like + 1 Subscribe", }; export default Course;
ValidationError