小编dev*_*_el的帖子

我MouseEvent从反应导入

import { MouseEvent } from 'react';

MouseEvent在下面使用

  const closeSelectBox = (e: MouseEvent): void => {
    if (!searchOptionWrapRef.current?.contains(e.target)) {
      setOpenSelectBox(false)
    }
  };

我听我的closeSelectBox

  useEffect(() => {
    document.addEventListener("click", closeSelectBox);
    return () => {
      document.removeEventListener("click", closeSelectBox);
    };
  }, [])

searchOptionWrapRef是一个div

const searchOptionWrapRef = useRef<HTMLDivElement>(null);

<div ref={searchOptionWrapRef}/>

但我收到以下错误

Argument of type 'EventTarget' is not assignable to parameter of type 'Node'.
  Type 'EventTarget' is missing the following properties from type 'Node': baseURI, childNodes, firstChild, isConnected, and 43 more. …

在下面的代码中

import Link from "next/link";

export default function IndexPage() {
  const handleClick = (path) => {
    if (path === "/about") {
      console.log("I clicked on the About Page");
    }
    if (path === "/posts") {
      console.log("I clicked on the Posts Page");
    }
  };
  return (
    <div>
      Hello World.{" "}
      <Link onClick={() => handleClick("/about")} href="/about">
        <a>About</a>
      </Link>
      <Link onClick={() => handleClick("/posts")} href="/posts">
        <a>Posts</a>
      </Link>
    </div>
  );

每当单击“关于”或“帖子”页面时，我希望console.log单击页面名称。现在，我当前的实现没有console.log任何作用。我的代码有什么问题吗？

我正在使用下一个13.1.0。我有一个 ContextProvider 设置浅色和深色主题

'use client';
import { Theme, ThemeContext } from '@store/theme';
import { ReactNode, useState, useEffect } from 'react';

interface ContextProviderProps {
  children: ReactNode
}

const ContextProvider = ({ children }: ContextProviderProps) => {
  const [theme, setTheme] = useState<Theme>('dark');

  useEffect(() => {
    const storedTheme = localStorage.getItem('theme');
    if (storedTheme === 'light' || storedTheme === 'dark') {
      setTheme(storedTheme);
    } else {
      localStorage.setItem('theme', theme);
    }
    // added to body because of overscroll-behavior
    document.body.classList.add(theme);
    return () => {
      document.body.classList.remove(theme);
    };
  }, [theme]);

  const …

我的Home页面通过以下方式将数据从我的strapicms 发送到我的PostSlider组件props

import React from "react";
import styles from './index.module.scss'
import { AxiosService } from '../utils/axios-service'
import PostSlider from '../components/postSlider/postSlider'

const Home = ({ posts }) => {
  return (
    <div id='contentsWrap' className={styles.dohandsWrap}>
      <PostSlider home={true} posts={posts} />
    </div>
  )
}

export default Home

export async function getStaticProps() {
  const axios = AxiosService.create()
  const res = await axios.get('/archives', {
    params: {
      category: 'news',
      display: true,
      showDoson: true,
      _limit: 5,
      _sort: 'id:DESC'
    }
  })

  return …

我正在遵循本教程的步骤 1

我有以下文件夹结构：

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 lib\n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 json\n\xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 messages.json\n\xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 testMessages.json\n\xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 model.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 test\n\xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 model.test.js\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 package.json\n

我package.json有以下内容来运行摩卡测试

\xe2\x80\x9ctest\xe2\x80\x9d: \xe2\x80\x9cmocha -r esm ./test/* \xe2\x80\x94exit\xe2\x80\x9d,\n

但我收到以下错误

> backend@1.0.0 test /Users/lee33ya/Desktop/mern-app/backend\n> mocha -r esm ./test/* --exit\n\nError: No test files found: "./test/*"\nnpm ERR! Test failed.  See above for more details.\n

我做错了什么以及如何解决我的测试未运行的问题？

我的github

我有一个选项卡组件，每次单击不同的选项卡时都会更改状态。

组件父级

import { useState } from "react";
import "./styles.scss";
import MemoizedTab from "./tab";

export default function App() {
  const [selectTab, setSelectTab] = useState("a");
  console.log("parent render");
  return (
    <div className="App">
      <div className="tab-list">
        <MemoizedTab
          tab={"a"}
          title={"First Title"}
          setSelectTab={setSelectTab}
        />
        <MemoizedTab
          tab={"b"}
          title={"Second Title"}
          setSelectTab={setSelectTab}
        />
        <MemoizedTab
          tab={"c"}
          title={"Third Title"}
          setSelectTab={setSelectTab}
        />
      </div>
      {selectTab === "a" && <div>this is a</div>}
      {selectTab === "b" && <div>this is b</div>}
      {selectTab === "c" && <div>this is c</div>}
    </div>
  );
}

子组件

import { memo } …

我想index.html在我的公共文件夹中为我的页面添加标题和描述元标记以改进 SEO，但 gatsbyindex.html在其gitignore文件中。我可以index.html在gitignore不破坏任何东西的情况下移除它吗？是否有不同的更新方式，index.html而无需每次推送 git 时都将其重置？

.env我的根目录中有一个文件，PORT = 3000;里面有

在我的中app.js，我使用 .env 文件来监听端口 3000

require('dotenv').config();

const express = require('express');
const app = express();
const port = process.env.PORT || 4000;

app.get('/', (req, res) => {
  res.send('Hello World!!!');
});

app.listen(port, () => console.log(`Example app listening on port ${port}!`));

尝试运行该文件后，出现以下错误

错误：监听 EADDRINUSE：地址已在使用 3000；

我使用的是 Mac，所以我尝试sudo lsof -i :3000在终端中使用，并被要求输入密码。

我输入密码并按 Enter 键，但没有任何反应。

我怎样才能消除错误？我相信我的密码是正确的。我今天确实获得了 Mac 操作系统的重大更新——这会导致一些与密码相关的问题吗？

我有以下组件

  const ListItem = ({ children, title = '' }) => {
    const [isActive, setIsActive] = useState(false)

    useEffect(() => {
      console.log('isActive', isActive)
    }, [isActive])

    return (
      <li className={`depth1${(isActive ? ' is-active' : '')}`} onMouseEnter={() => {
        console.log('onMouseEnter')
        setIsActive(true)
      }} onMouseLeave={() => {
        console.log('onMouseLeave')
        setIsActive(false)
      }}>
        <a href="#" onClick={(e) => {
          console.log('onClick a')
          e.preventDefault()
          setIsActive(!isActive)
        }}>{title}</a>
        {isActive && (
          <ul onClick={() => {
            console.log('onClick ul')
            setIsActive(!isActive)
          }}>
            {children}
          </ul>
        )}
      </li>
    )
  }

该组件在以下上下文中使用

<ul>
  <ListItem title="BRAND">
    <li>
      <a href="#" onClick={(e) …

我用来next/router处理页面转换。

When a user clicks on a list of numbers from 1-4 on page a, I save the number they click via localStorage and reorder my list of numbers on page b.

For example, if the default order on page a is

1, 2, 3, 4

And the user clicks 4

next/router send the user to page b with the changed order

4, 1, 2, 3

Below is my page a code

import { useState, useEffect …