小编Mar*_*oG8的帖子

我尝试使用节点版本 12.1.0 创建 React 应用程序，但它警告我，我的最低节点版本应至少为 14.0。我曾经nvm将节点版本更改为 14.0 并创建了 React 应用程序。但是，我想在节点版本 12.1.0 上使用我的应用程序。所以我更改为节点版本 v12.1.0 但我得到：

“Module.createRequire 中的错误不是函数”错误。还有“错误中的错误：子编译失败：Module.createRequire 不是函数”

我尝试用这行代码更改它，但它不起作用

const [click, setClick] = useState(false);

const closeNav = () => {
  setClick(!click);
};

const openNav = () => {
  setClick(!click);
};

<div
  className=" absolute inset-0 ${click ? translate-x-0 : -translate-x-full } 
        transform  z-400 h-screen w-1/4 bg-blue-300 "
>
  <XIcon onClick={closeNav} className=" absolute h-8 w-8 right-0 " />
</div>;

开始从事filter: blur()一个项目，发现它在 Safari 上运行得不太好。

与blur其他浏览器上的向外扩展不同，在 Safari 上，它似乎overflow被设置为hidden，但事实并非如此。有时它可以工作，有时却完全崩溃。我还注意到，当过滤器发生转换时，该错误会变得更加“激进”。无论如何，这是与工作（在 Chrome 上）和不工作（在 Safari 上）的比较。另外，这里有一个代码笔，其中包含此错误的副本（尽管它仅在 Safari 上可见）。

一如既往，提前感谢您的帮助。如果您想预览代码而不使用代码笔，这里是：

代码：

body {
  height: 100vh;
  background: #272727;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  font-family: Gill Sans;
}

.content-div {
  width: 30rem;
  height: 30rem;
  background: white;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}

.title {
  font-size: 1.4rem;
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
}

.filter {
  font-size: …

根据 Socket IO 文档，我可以使用 http，但不能使用 https。我正在使用带有 http 集群的套接字 io，它工作正常，但当我在其上实现 https 时却无法工作。
我正在使用的套接字 IO 文档：- https://socket.io/docs/v4/cluster-adapter/

我的代码是

const cluster = require("cluster");
const https = require("https");
var fs = require("fs");
const { Server } = require("socket.io");
const numCPUs = require("os").cpus().length;
const { setupMaster, setupWorker } = require("@socket.io/sticky");
const { createAdapter, setupPrimary } = require("@socket.io/cluster-adapter");
const sslOptions = {
  key: fs.readFileSync("security/cert.key"),
  cert: fs.readFileSync("security/cert.pem")
};
const options = { cors: true, origins: "*" };
if (cluster.isMaster) {
  console.log(`Master ${process.pid} is running`);

  const httpServer = …

我是反应的绝对初学者。我必须将特定属性传递给 div 内的所有组件，而不将它们传递给 individual，例如，而不是这样做：

 function App() {
    return (
      <div>
        <Component1 props = {propObject}/>
        <Component2 props = {propObject}/>
        <Component3 props = {propObject}/>
      </div>
    );
}

我怎样才能实现这样的目标？:

function App() {
  return (
    <div props={propObject}>
      <Component1 />
      <Component2 />
      <Component3 />
    </div>
  );
}

我在 React/TypeScript/TailWind/NextJS 项目中使用自定义字体。我将字体存储在/fonts文件夹中为Glimer-Regular.ttf.

然后在我的global.css声明中如下。

@layer base {

    @font-face {
        font-family: '"Glimer"';
        src: url(../../fonts/Glimer-Regular.ttf) format('ttf');
    }
}

在我的tailwind.config.js文件中，我添加了如下字体系列。

module.exports = {
    mode: 'jit',
    important: true,

    purge: ['./src/pages/**/*.{js,ts,jsx,tsx}'],
    darkMode: false,
    content: [],
    theme: {
        extend: {
            fontFamily: {
                glimer: ['"Glimer"']
            },

这应该可以工作，但字体仍然是默认的并显示serif-400。我仍然可以在家庭部分看到Glimer，但字体似乎没有改变。我有什么遗漏的吗？

tailwindcss我使用和创建了一个单页网站React。在原型中，我使用tailwindcss“scroll-smooth”类并且它有效。在React类中“滚动平滑”不起作用，但原因是什么？

https://tailwindcss.com/docs/scroll-behavior#basic-usage

当我单击导航上的“为什么”时，我跳转到“为什么”部分，但并不顺利：

function App() {
  return (
    <div className="App">
      <div className="relative">
        <div className="flex flex-col scroll-smooth">

          <HomeNav />

          <HomeHero />

          <section id="why" className="flex flex-col items-center px-6 pt-20">
            ...
          </section>
          <HomeFooter />
        </div>
      </div>
    </div>
  );
}

解决方案：

我认为TailwindCss“滚动平滑”类不适用于反应。所以我使用NPM“react-scroll”包，它工作得很好，而且我可能不太担心兼容性。

https://www.npmjs.com/package/react-scroll

所以我正在为我的一个 React 项目编写测试，我只是决定使用模拟服务工作者来模拟我的 api 调用，并且我正在尝试模拟登录端点。所以我正在尝试模拟登录错误，其中我返回错误消息当输入与特定电子邮件不匹配时。给出下面的代码；

const server = setupServer(
  rest.post("https://testlogin.com/api/v1/login", (req, res, ctx) => {
    // the issue is getting the email from the request body something like the code just below
    if (req.body["email"] != "test@example.com") {
      ctx.status(401);
      return res(
        ctx.json({
          success: false
        })
      );
    }
  })
);

我怎样才能做到这一点？有更好的方法吗？

当我切换到黑暗模式时，我想更改我的徽标图像（我在顺风上使用类）。有机会成功吗？

这是我用来更改主题的钩子：

const useTheme = () => {
  const [theme, setTheme] = useState(localStorage.theme);
  const nextTheme = theme === "light" ? "dark" : "light";

  useEffect(() => {
    const rootElement = window.document.documentElement;
    rootElement.classList.remove(nextTheme);
    rootElement.classList.add(theme);
    localStorage.setItem("theme", theme);
  }, [theme, nextTheme]);

  return [nextTheme, setTheme];
};

这是我想要改变的形象（如果有帮助的话）：

<div className="flex flex-col">
  <Link
    to="/"
    className="flex px-5 gap-2 my-6 pt-1 w-190 items-center"
    onClick={handleCloseSideBar}
  >
    <img src="/img/logo.png" alt="logo" className="w-full" />
  </Link>
</div>;

后端开发在这里学习前端。我试图在中小型屏幕上隐藏一个元素，并在其余屏幕上可见。

但问题是，当我sm:hidden这样做时，它会隐藏小屏幕及以上的元素。当我尝试这样做时，sm:hidden md:visible该元素在中等屏幕及以上屏幕上不可见。我该怎么办？