小编You*_*mar的帖子

到处搜索了好几天，我仍然无法理解为什么我最新的尝试也不起作用。

为什么 dist 文件夹中没有 CSS 文件？

现在，我正在将样式导入到一个.js文件中，该文件稍后会导入到我的应用程序入口点中，但仍然什么也没有。

webpack.config.js

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HTMLWebpackPlugin = require('html-webpack-plugin');

const path = require('path');

const paths = {
  src: path.resolve(__dirname, 'src'),
  dist: path.resolve(__dirname, 'dist'),
};

module.exports = {
  entry: 'index.js',
  mode: 'production',
  cache: false,
  output: {
    path: paths.dist,
    filename: 'index.js',
  },
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: …

我正在使用博览会中的内置启动屏幕，您可以将其添加到app.json一个简单的测试应用程序中。但是我注意到我的开始屏幕在显示我添加的资源之前以默认模式闪烁 1 毫秒AsyncStorage。

我尝试过使用世博会的启动画面包，但我发现它有点令人困惑。有没有一种相当简单的方法来添加我的App.js这个逻辑：

显示启动屏幕，当加载所有资源时，加载此设置（使用我的上下文和屏幕），或者只是增加博览会启动屏幕中构建的加载时间（因为我假设它会加载正在获取的资源？）。

const App = () => {

  const [selectedTheme, setSelectedTheme] = useState(themes.light)

  const changeTheme = async () =>{
    try {
      const theme = await AsyncStorage.getItem("MyTheme")
      if (theme === "dark"){
      setSelectedTheme(themes.nightSky)} 
      else if (theme === "light") {
        setSelectedTheme(themes.arctic)
        }
    } catch (err) {alert(err)}
  }
  
  useEffect(()=> {
    changeTheme()
  },[])


  return (
    <ThemeContext.Provider value={{selectedTheme, changeTheme}}>
         <NavigationContainer>
            <Stack.Navigator screenOptions={{headerShown:false, presentation: 'modal'}}>
              <Stack.Screen name="Home" component={home}/>
            </Stack.Navigator>
          </NavigationContainer>
    </ThemeContext.Provider>

  );
};

我试图了解如何使用服务器组件处理模式打开/关闭。以前，对于客户端组件，我只需将状态提升到我的Layout：

export default function Layout({ children }) {

const [showPopup, setShowPopup] = useState(true)

return (
<>
  <Popup showPopup={showPopup} setShowPopup={setShowPopup} />
  <div>{children}</div>
</>
)

然后根据这个状态显示/隐藏我的弹出窗口。但是，对于服务器组件，我不能再这样做了。为了使其工作，我需要"use client"在顶部将其设为客户端组件，但随后整个应用程序将成为客户端组件（因为这是我的根布局）。

我希望根布局成为一个服务器组件，以允许应用程序利用基础设施来实现更好的性能和整体用户体验。

那么，如何在不依赖 useState 和客户端组件的情况下处理显示或隐藏模式呢？这种情况很常见，我可能遗漏了一些明显的东西，但我找不到答案。

我正在制作一个简单的 ShoppinList。我有两个组件，Form.js并且List.j. 如何显示存储在数组中的List.js项目？我不想写在 中，但会将逻辑保留在其自己的组件中。listForm.jsuseStateApp.js

应用程序.js：

//Imporing Components\nimport Form from "./Components/Form";\nimport List from "./Components/List";\n\nfunction App() {\n  return (\n      <div className="App">\n          <header>\n              <h1>Shopping List</h1>\n          </header>\n          <Form/>\n          <List/>\n      </div>\n  )\n}\n

表单.js：

/*Create a Component*/\nconst Form = () => {\n\n    const [inputText,setInputText] = useState("")\n    const [list,setList] = useState([])\n\n    const submitBtn = (e) =>{\n         e.preventDefault()  /*kein refresh t\xc3\xa4tigen*/\n        setList([\n            ...list,{inputText}\n        ])\n    }\n\n    /*Funktion*/\n    /*const inputTextHandler =  (e) => {\n        setInputText(e.target.value)\n    }*/\n\n …

我正在开发一个 React 项目，一切正常。然后我开始使用react-router-dom，但路由器不工作。我想进入主屏幕，但它给了我这些错误：

Invalid hook call. Hooks can only be called inside of the body of a function component. 

Uncaught TypeError: Cannot read properties of null (reading "useRef")

应用程序.js：

import Container from 'react-bootstrap/Container'
import Footer from './components/footer';
import Header from './components/header';
import './index.css';
import {BrowserRouter as Router, Route} from 'react-router-dom'
import HomeScreen from './screens/homeScreen';

function App() {
  return (
    <Router>
      <Header/>
      <main className='py-3'>
        <Container >
        <Route path="/" exact component={HomeScreen} />
        </Container>
      </main>
      <Footer/>
    </Router>
  );
}

export default …

我设置了一个自定义挂钩，它获取一个ref对象并观察它：

import { useState, useEffect, MutableRefObject } from "react";

const UseOnScreen = (ref: MutableRefObject<undefined>) => {
  const [isIntersecting, setIntersecting] = useState(false);
  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) =>
      setIntersecting(entry.isIntersecting)
    );
    if (ref.current) {
      observer.observe(ref.current);
    }
  });
  return isIntersecting;
};
export default UseOnScreen;

接下来，在我的页面组件中，我声明了一个refusing useRef()：

import { useRef } from "react";
import UseOnScreen from "../hooks/UseOnScreen";
import About from "./about";

export default function Home() {
  const aboutRef = useRef();
  const aboutRefValue = UseOnScreen(aboutRef);

  return ( …

我在获取动态路由中的参数时遇到问题。我在阅读时不断收到错误：

类型错误：无法解构“router.query”的属性“themenID”，因为它未定义。

另外，我不能使用next/router但必须集成路由器next/navigation。但这个没有查询属性。我使用 Next.js 版本 13

该路径的名称如下：http://localhost:3000/MainThema/2。

应用程序/MainThema/[themenID]/page.js：

"use client";
import { useRouter } from "next/navigation";
import React from "react";

export default function MainThema() {
  const router = useRouter();
  console.log(router);

  const { themenID } = router.query;

  return <div>MainThema </div>;
}

我尝试获取调用的更新状态localstorage，但是当我控制台将其登录到其中的函数时，会给出内部设置的默认值：darkmodeuseContextApp.tsxContext.js

应用程序.tsx：

const { darkmode } = useContext(Context);

React.useEffect(() => {
  console.log(darkmode);
}, []);

上下文.js：

import { useState, useEffect, createContext } from "react";

const Context = createContext();

function ContextProvider({ children }) {
  const [darkmode, setDarkmode] = useState(false);

  // Local Storage: setting & getting data
  useEffect(() => {
    const darkmode = JSON.parse(localStorage.getItem("darkmode"));
    if (darkmode) {
      setDarkmode(darkmode);
    }
  }, []);

  useEffect(() => {
    localStorage.setItem("darkmode", JSON.stringify(darkmode));
  }, [darkmode]);

  const toggleDarkmode = () => {
    setDarkmode((prev) => !prev); …

我使用创建了一个新的Next.js。npx create-next-app@latest --typescript安装后（版本为13.3.4），在不更改任何文件的情况下，我在文件夹middleware.ts中添加了一个新文件src，并且只放置了这段代码：

import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";

export function middleware(request: NextRequest) {
  console.log("request", JSON.stringify(request));
  return NextResponse.next();
}

控制台日志被多次点击。我想应该是一次吧？对于这个新的 Next.js 安装，我需要做任何配置吗？

注意：我将在中间件中执行一些 cookie 逻辑以进行身份​​验证。截屏：

在 Next 的经典 Pages Router 中，您可以在_app.js文件中添加全局提供程序并将其包裹在整个组件树中。这将确保提供程序可供所有组件使用。

如果您使用 App Router 执行此操作，您会收到一条错误消息

您正在导入需要 useState 的组件。它仅在客户端组件中工作，但其父组件都没有标记为“使用客户端”，因此默认情况下它们是服务器组件。

有没有一种方法可以在不放弃服务器组件的情况下实现类似的目标？