任何人都知道为什么 jsfiddle 在测试 jsx 时给我这个错误。
未封闭的正则表达式
https://jsfiddle.net/chapster11/LzdfLy53/
const combobox = () => (
<div id="box">
working
</div>
);
ReactDOM.render(<combobox />, document.querySelector("#app"));
Run Code Online (Sandbox Code Playgroud)
——
我正在使用 gatsby js 并试图弄清楚如何使用 Gatsby 链接在同一页面的 div 内呈现新组件的页面级侧边栏我可以使用 react-router-dom 来做到这一点,但在 Gatsby 中我可以做到find 是如何创建博客文章这让我发疯,因为我找到的每个教程都是相同的博客文章。
这是我的布局页面 /layouts/index.js
export default ({ children }) => (
<div id="layout">
<header>
<h3>Header</h3>
<MainNav />
</header>
{children()}
</div>
)
Run Code Online (Sandbox Code Playgroud)
关于页面 /pages/about.js
export default ({ location, match }) => {
console.log('location = ', location, 'match = ', match );
return (
<div id="about">
<SideBar />
<div id="content">
// . add child template or component for link clicked in sidebar
</div>
</div>
);
};
Run Code Online (Sandbox Code Playgroud)
我想要做的是,当用户单击侧边栏中的链接时,会停留在 about 上,但会根据在 about 侧边栏中单击的 …
我认为渲染成帧器运动会重新执行我的动画,因为初始设置为隐藏,动画设置为显示。但这种情况并非如此。
我怎样才能让它在每次状态变化时重新播放动画?
import React, { useEffect, useState } from "react";
import { motion} from "framer-motion";
import styled from "styled-components";
const Screen = () => {
const [state, setState] = useState(1);
useEffect(() => {
setInterval(() => {
setState(Math.random());
}, 4000);
}, []);
return (
<Title variants={variants} animate="show" initial="hide">
{console.log("re-render")}
{`screen ${state}`}
</Title>
);
};
const Title = styled(motion.div)`
color: red;
`;
export const variants = {
show: {
opacity: 1,
y: 0,
transition: {
ease: "easeOut",
duration: 0.3
}
},
hide: …Run Code Online (Sandbox Code Playgroud) 我已经浏览了文档,但无法让 UI firebase 模拟器工作。
\n我在 mac M1 上使用 firebase 版本:9.22.0
\n控制台中出现警告。
\ni emulators: Starting emulators: hosting\ni hosting: Serving hosting files from: build\n\xe2\x9c\x94 hosting: Local server: http://localhost:5001\n\xe2\x9a\xa0 emulators: The Emulator UI requires a project ID to start. Configure your default project with 'firebase use' or pass the --project flag.\n\n\xe2\x94\x8c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x90\n\xe2\x94\x82 \xe2\x9c\x94 All emulators ready! It is now safe to connect your app. \xe2\x94\x82\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x98\n\n\xe2\x94\x8c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\xac\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x90\n\xe2\x94\x82 Emulator \xe2\x94\x82 Host:Port \xe2\x94\x82\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\xbc\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\xa4\n\xe2\x94\x82 Hosting \xe2\x94\x82 localhost:5001 \xe2\x94\x82\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\xb4\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x98\n Emulator Hub running at localhost:4400\n Other reserved ports: …Run Code Online (Sandbox Code Playgroud) _middleware当我尝试初始化 Firebase admin V9 时,在 Next.js 文件中出现此错误。有人知道如何解决这个问题吗?
./node_modules/@google-cloud/storage/build/src/bucket.js:22:0
Module not found: Can't resolve 'fs'
Run Code Online (Sandbox Code Playgroud)
../../firebase/auth-admin
import * as admin from "firebase-admin";
if (!admin.apps.length) {
admin.initializeApp({
credential: admin.credential.cert({
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
privateKey: process.env.FIREBASE_ADMIN_PRIVATE_KEY,
}),
});
}
const firestore = admin.firestore();
const auth = admin.auth();
export { firestore, auth };
Run Code Online (Sandbox Code Playgroud)
在我的中调用它_middleware
import { NextFetchEvent, NextRequest, NextResponse } from "next/server";
import { auth } from "../../firebase/auth-admin";
export default async function authenticate(
req: NextRequest,
ev: NextFetchEvent
) {
const token = …Run Code Online (Sandbox Code Playgroud) 我正在尝试使用来自eternicode的bootstrap datepicker,它是原始eyecon picker的一个分支.
我添加了一个jsfiddle示例,说明我正在尝试做什么.
在小提琴的所有js的底部是我初始化我的datepicker的地方.我添加了一个,setTimout所以我可以模拟动态更改datepickers日期.我已经阅读了datepicker('update');你执行操作后需要调用的地方,setDate以便更新选择器UI.
当我这样做时,它会导致一些问题.如果单击输入字段以显示日历,则日历将显示突出显示的日期,即今天的日期,而不是我更新日期的新日期.
当您关闭选择器时,它会将今天的日期追加到输入值的末尾.这不是正常行为.我要做的就是设置一个新的日期并让它同时更新UI选择器.
HTML
<div class="input-append date" id="date-picker">
<input class="span6" size="16" type="text">
<span class="add-on"><i class=""></i></span>
</div>
Run Code Online (Sandbox Code Playgroud)
var picker = $('#date-picker').datepicker({format:'M d, yyyy' });
var d = new Date();
d.setDate(d.getDate() + 1);
setTimeout(function(){
picker.datepicker("setDate", d).datepicker('update');
},3000);
Run Code Online (Sandbox Code Playgroud) 我正在尝试查找 React.createRef 的输入内容。标头是一个自定义组件。 header.current总是说
(属性)React.RefObject.current:未知对象的类型为“未知”。
我可以将其设置为打字<any>,但这是最简单的方法。如何让 Typescript 发挥良好作用并停止抱怨。
Example: React.createRef<any>()
Run Code Online (Sandbox Code Playgroud)
完整代码:
const header = React.createRef();
const { container } = render(
<Header{...props} headerRef={header} />,
);
const el = header.current.getButtonElement("button");
Run Code Online (Sandbox Code Playgroud)
我什至尝试将其设置为 HTMLDivElement 这就是它返回的内容。
const header = React.createRef<HTMLDivElement>();
Run Code Online (Sandbox Code Playgroud)
但下面仍然给我一个错误: (property) React.RefObject.current: HTMLDivElement | null 对象可能为“null”。
const el = header.current.getButtonElement("button");
Run Code Online (Sandbox Code Playgroud) 当用户单击向上或向下箭头并且由于某种原因状态未更新时,我试图让 useState 工作。
即使我 setTimeout 来查看索引是否更新仍然没有。在这里完全混淆了。
import React, { useEffect, useState } from 'react';
const Wrapper = ({ children }) => {
const [index, setIndex] = useState(-1);
useEffect(() => {
document.addEventListener('keydown', handler);
return () => {
document.removeEventListener('keydown', handler);
};
}, []);
const handler = (event) => {
if (event.key === 'ArrowDown') {
setIndex(index + 1);
console.log('index = ', index);
}
};
return (
<div>
{children}
</div>
);
};
export default Wrapper;
Run Code Online (Sandbox Code Playgroud) 有没有人成功地让 cy.tick() 在 cypress 组件测试中工作。cy.clock() 会停止时间,但在 cypress 组件测试中,tick 不会将其向前移动。如果有人能够做到这一点,请举出简单的例子。
再说一次,这是在 cypress 组件测试中,而不是 e2n 测试中。
我还在 before() 方法中添加了时钟。
reactjs ×5
javascript ×2
cypress ×1
cypress-component-test-runner ×1
firebase ×1
gatsby ×1
github ×1
jquery ×1
jsfiddle ×1
jsx ×1
next.js ×1
react-hooks ×1
typescript ×1