主页 / coding / 问题

问题[reactjs](coding)

Martin Hope
HoRiz
Asked: 2025-02-15 01:39:48 +0800 CST
  • 6

我正在开发一个基于 Vite 的 React 项目。我想添加 Tailwind CSS，但按照以下步骤操作后，出现了错误。

1. npm install -D tailwindcss postcss autoprefixer

初始化 Tailwind CSS

2. npx tailwindcss init -p

第一个命令执行没有错误。但是，第二个命令导致以下错误：

npm error could not determine executable to run
npm error A complete log of this run can be found in: C:\Users\HelloWorld\AppData\Local\npm-cache\_logs\2025-02-14T17_30_29_652Z-debug-0.log

我尝试过 clear npm，

Clear npm Cache

它仍然不起作用。运行第二个时出现同样的错误。

reactjs
Martin Hope
gokulsgr
Asked: 2025-02-14 00:31:47 +0800 CST
  • 6

我想了解 useParams 在 React Router 中的工作原理。我有两条路由 — 一条带有动态参数，另一条带有通配符 (*)。

我应该怎么做才能获得

 //   {
  //     "appId": "appid",
  //     "*": "page2"
  // }

我有两条路线：

/appid/page2

/appid/page3

这是我的设置： https：//codesandbox.io/p/sandbox/react-router-v6-forked-sw5ndw ？file=%2Fsrc%2FApp.js%3A1%2C1-69%2C1

import React from "react";
import {
  BrowserRouter,
  Routes,
  Route,
  Navigate,
  Link,
  useParams,
} from "react-router-dom";

import "./styles.css";

function HomePage() {
  return <div className="page">🏠 Page</div>;
}
function Page1() {
  return <div className="page">🏠 Page1</div>;
}
function Page2() {
  console.log(useParams());
  //   {
  //     "appId": "appid",
  //     "*": ""
  // }
  return <div className="page">🏠 Page2</div>;
}
function Page3() {
  console.log(useParams());
  //   {
  //     "appId": "appid",
  //     "*": "page3"
  // }
  return <div className="page">🏠 Page3</div>;
}
function Application() {
  return (
    <>
      1
      <Routes>
        <Route path="/" element={<Page1 />} />
        <Route path="/page2/*" element={<Page2 />} />
        <Route path="/page3" element={<Page3 />} />
      </Routes>
    </>
  );
}

export default function App() {
  return (
    <BrowserRouter>
      <div>
        <Link to="/" className="link">
          Home
        </Link>
        <Link to="/appid/page2" className="link">
          APP Page 2
        </Link>
        <Link to="/appid/page3" className="link">
          APP Page 2
        </Link>
      </div>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path=":appId/*" element={<Application />} />
      </Routes>
    </BrowserRouter>
  );
}
reactjs
Martin Hope
Ethan Caldwell
Asked: 2025-02-12 17:43:23 +0800 CST
  • 8

我正在开发一个 Vite + React + TypeScript 项目，并使用以下配置的 ESLint：

相关 ESLint 配置（.eslintrc.json）

{
  "extends": [
    "eslint:recommended",
    "airbnb/hooks",
    "airbnb-typescript",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "rules": {
    "react-hooks/exhaustive-deps": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "import/order": [
      "error",
      {
        "groups": [["external", "builtin"], "internal", "parent", "sibling", "index"],
        "alphabetize": { "order": "asc", "caseInsensitive": true }
      }
    ]
  },
  "settings": {
    "import/resolver": {
      "typescript": { "project": "./tsconfig.json" }
    }
  }
}

问题：

当我运行 ESLint（eslint . --ext .ts,.tsx）时，没有出现任何错误，但我的一些队友（使用 Windows）看到了多个 linting 错误。

环境差异：

  • 我： macOS（没有 ESLint 错误）

  • 队友： Windows（看到 ESLint 错误）

这可能是路径解析、行尾 ( LFvs. CRLF) 或区分大小写的问题吗？任何见解都会有所帮助！

我尝试过的：

  • 确保所有队友都拥有相同node_modules的eslint版本。

  • 删除node_modules和package-lock.json，然后重新安装（npm install）。

  • 检查全局 ESLint 设置（禁用全局 ESLint）。

  • 使用仅启用 ESLint 和 Prettier 的VS Code 。

  • 手动运行 ESLint（在 VS Code 之外）。

reactjs
Martin Hope
leosole
Asked: 2025-02-12 01:08:19 +0800 CST
  • 7

背景：我正在构建一些库来帮助我构建带有微前端的门户。我有一个 UI 库（带有 UI 组件）、一个 Commons 库（使用 UI，具有所有微前端的共享组件）、一个渲染器库（使用 UI，用于渲染 strapi 数据）。它们都使用 tailwind css。

问题：当我使用公共库中接受子组件的组件时，用作子组件的组件的断点不起作用。如果我在公共组件之外使用相同的组件，断点就会起作用。例如：

<CommonsComponent>
  <ComponentWithBreakpoint /> // breakpoints do not work
</CommonsComponent>

<ComponentWithBreakpoint /> // breakpoints work

查看开发工具，我可以看到未应用断点的类（来自layout.css的lg：flex-row）：

在此处输入图片描述

flex-col 类也来自不同的文件（page.css）

这些组件包括：

const CommonsComponent = ({children}: {children: React.ReactNode}) => {
return (<div className="flex flex-col gap-4 w-full lg:w-[70%]">
  {children}
</div>)
} //from the commons library

const ComponentWithBreakpoint = () => {
return (
<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-2 w-full">
  //content
</div>
)} // from one of the microfrontends
reactjs
Martin Hope
Facundo Cabrera
Asked: 2025-02-11 03:40:05 +0800 CST
  • 6

我正在按照一个教程： https://www.youtube.com/watch?v =R4AhvYORZRY&t 并且我遇到了一个问题，其中，<LinkContainer />我得到了那个错误，删除它，修复它，将路由器添加到应用程序或标题只是告诉我它已经是一个路由器。

的代码LinkContainer，在这里找到：

https://www.npmjs.com/package/react-router-bootstrap?activeTab=code

var LinkContainer = function LinkContainer(_ref) {
var children = _ref.children,
    onClick = _ref.onClick,
    _ref$replace = _ref.replace,
    replace = _ref$replace === void 0 ? false : _ref$replace,
    to = _ref.to,
    state = _ref.state,
    _ref$activeClassName = _ref.activeClassName,
    activeClassName = _ref$activeClassName === void 0 ? 'active' : _ref$activeClassName,
    className = _ref.className,
    activeStyle = _ref.activeStyle,
    style = _ref.style,
      getIsActive = _ref.isActive,
     props = _objectWithoutProperties(_ref, _excluded);

  var path = _typeof(to) === 'object' ? to.pathname || '' : to;
  var navigate = (0,react_router_dom__WEBPACK_IMPORTED_MODULE_1__.useNavigate)();
  var href = (0,react_router_dom__WEBPACK_IMPORTED_MODULE_1__.useHref)(typeof to === 'string' ? {
   pathname: to
  } : to);

main.jsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  RouterProvider,
} from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import "./index.css";
import App from "./App.jsx";
import HomeScreen from "./screens/HomeScreen.jsx";

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<App />}>
      <Route index={true} path="/" element={<HomeScreen />} />
    </Route>
  )
);

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <RouterProvider router={router} />
  </StrictMode>
);

应用程序.jsx

import Header from "./components/Header";
import { Container } from "react-bootstrap";
import { Outlet } from "react-router-dom";

const App = () => {
  return (
    <>
      <Header />
      <Container className="my-1">
        <Outlet />
      </Container>
    </>
  );
};

export default App;

Header.jsx

import { Navbar, Nav, Container } from "react-bootstrap";
import { FaChild, FaFileUpload, FaExchangeAlt } from "react-icons/fa";
import { LinkContainer } from "react-router-bootstrap";

const Header = () => {
  return (
    <header>
      <Navbar bg="dark" variant="dark" expand="lg" collapseOnSelect>
        <Container>
          <LinkContainer to="/">
            <Navbar.Brand>MY APP</Navbar.Brand>
          </LinkContainer>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="ms-auto">
              <LinkContainer to="/viewKids">
                <Nav.Link>
                  <FaChild /> Ver Niños
                </Nav.Link>
              </LinkContainer>
              <LinkContainer to="/uploadKids">
                <Nav.Link>
                  <FaFileUpload /> Subir Niño
                </Nav.Link>
              </LinkContainer>
              <LinkContainer to="/updateKids">
                <Nav.Link>
                  <FaExchangeAlt /> Actualizar Niño
                </Nav.Link>
              </LinkContainer>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </header>
  );
};

export default Header;

我尝试了很多方法，重新安装依赖项，重新启动应用程序，但似乎唯一有效的方法就是删除链接容器。我愿意接受与链接容器一样好的替代方案，但我很想知道我做错了什么。如果需要更多信息，我也愿意分享。

reactjs
Martin Hope
Korovjov
Asked: 2025-02-09 22:37:22 +0800 CST
  • 4

我已经搜索了我所知道的一切以及所有地方。您是否有任何图书馆：

  1. 使用 shadcn
  2. 是反应
  3. 可以搜索
  4. 可以保存多个项目（逗号分隔或其他方式）
  5. 使用 fetch 或其他方式搜索数据库

如果没有必要的话，我不想自己建造它......

reactjs
Martin Hope
eskimopest
Asked: 2025-02-09 19:23:05 +0800 CST
  • 5

我有 2 个组件。一个导航栏和一个侧边栏/购物车。在导航栏上，我有一个按钮可以打开和关闭侧边栏。我有一个事件可以触发 clickOutside 函数及其工作。问题是，当我在侧边栏处于活动状态时单击购物车项目时，侧边栏会关闭并再次重新打开。

我的App.jsx：

import { useEffect, useState } from "react";
import "./App.css";
import { Navbar } from "./Components/Navbar";
import { ListItem } from "./Components/ListItem";
import { Cart } from "./Components/Cart";

function App() {
  const [list, setList] = useState([]);
  const [cartActive, setCartActive] = useState(false);

  const fetchList = () => {
    fetch(`https://fakestoreapi.com/products`)
      .then((res) => res.json())
      .then((data) => {
        setList(data);
      })
      .catch((error) => {});
  };

  useEffect(() => {
    fetchList();
  }, []);

  return (
    <>
      <Navbar setCartActive={setCartActive} cartActive={cartActive} />
      <Cart cartActive={cartActive} setCartActive={setCartActive} />
      <div className="main">
        <div className="container">
          {list.map((item) => {
            return <ListItem key={item.id} item={item} />;
          })}
        </div>
      </div>
    </>
  );
}

export default App;

我的导航栏：

import { useEffect, useState } from "react";
import { FaShoppingBag } from "react-icons/fa";
import { useSelector } from "react-redux";

export const Navbar = ({ setCartActive, cartActive }) => {
  const cart = useSelector((state) => state.cart.cart);
  const [totalItems, setTotalItems] = useState(0);

  const fetchTotalItems = () => {
    setTotalItems(cart.reduce((acc, curr) => acc + curr.amount, 0));
  };

  useEffect(() => {
    fetchTotalItems();
  }, [cart]);

  return (
    <nav>
      <div className="container">
        <div className="brand">
          Redux<span>Store</span>
        </div>
        <div className="icon" onClick={() => setCartActive(!cartActive)}>
          <FaShoppingBag /> ({totalItems})
        </div>
      </div>
    </nav>
  );
};

我的侧边栏/购物车：

import { useSelector } from "react-redux";
import { CartItem } from "./CartItem";
import { useEffect, useRef } from "react";

export const Cart = ({ cartActive, setCartActive }) => {
  const cart = useSelector((state) => state.cart.cart);
  const cartRef = useRef();

  const handleClickOutside = (e) => {
    if (cartActive && cartRef.current && !cartRef.current.contains(e.target)) {
      setCartActive(false);
    }
  };

  useEffect(() => {
    document.addEventListener("mousedown", handleClickOutside);

    () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  });

  return (
    <div className={`cart ${cartActive ? "active" : ""}`} ref={cartRef}>
      {cart.map((item) => {
        return <CartItem key={item.id} item={item} />;
      })}
    </div>
  );
};

这是可行的，但是当用户在侧边栏打开时单击购物车图标时，侧边栏会关闭并重新打开。这是因为它捕获了 clickOutside 函数。我怎样才能停止导航栏上的 clickoutside 函数？

这是codesandbox的链接

reactjs
Martin Hope
Vatshal Negi
Asked: 2025-02-09 17:28:20 +0800 CST
  • 6

我按照 Tailwind v4 文档中提到的所有步骤，使用 parcel 设置 TailwindCSS v4。设置后，当我运行本地服务器时出现此错误。

Server running at http://localhost:1234
🚨 Build failed.

@parcel/transformer-css: Unexpected token CloseSquareBracket

C:\Users\vatsh\OneDrive\Desktop\study\coding\4\src\index.css:1781:11            
    > 1780 |   .\[host\:\]port\] {
    > 1781 |     host: ]port;
           |           ^
      1782 |   }
      1783 |   .\[keywords\:node-addon-api\] {

我很困惑，因为 tailwind 内置文件代码（）中显示了错误，index.css而我无法编辑。

index.css文件仅包含以下内容：

@import "tailwindcss";

此问题仅发生在 TailwindCSS v4 中。请帮助我解决此错误。

reactjs
Martin Hope
Bawenang Rukmoko Pardian Putra
Asked: 2025-02-08 20:35:45 +0800 CST
  • 5

我有一个 React Native 应用程序，其中有一个名为 TasksScreen 的屏幕：

export default function TasksScreen() {
  const [loading, setLoading] = useState<boolean>(true);

  const colorScheme = useColorScheme() ?? "light";
  const theme = colorScheme === "dark" ? darkTheme : lightTheme;
  const themeColors = colorStyles[colorScheme];

  const onLoadingChanged = (loading: boolean) => setLoading(loading);

  if (loading) {
    return (
      <View style={theme.loaderContainer}>
        <ActivityIndicator size="large" color={themeColors.primary} />
      </View>
    );
  }

  const selectTask = (task: TaskEntity) => {
    router.push(`/task/${task.id}`);
  };

  return (
    <SafeAreaView style={theme.container}>
      <View
        style={{
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center",
          padding: 16,
          backgroundColor: themeColors.background,
        }}
      >
        <Text type="subtitle">Tasks:</Text>
        <TouchableOpacity style={theme.buttonPrimary} onPress={() => router.push('/task/create')}>
          <Text style={theme.buttonTextPrimary}>Create new task</Text>
        </TouchableOpacity>
      </View>
      <TaskList key="TabsTasklist" setLoading={onLoadingChanged} selectTask={selectTask} />
    </SafeAreaView>
  );
}

它又使用这个名为 TaskList 的子组件：

const TaskList = ({
  setLoading,
  selectTask,
}: {
  setLoading: (loading: boolean) => void;
  selectTask: (task: TaskEntity) => void;
}) => {
  const [tasks, setTasks] = useState<TaskEntity[]>([]);

  const colorScheme = useColorScheme() ?? "light";
  const theme = colorScheme === "dark" ? darkTheme : lightTheme;
  const themeColors = colorStyles[colorScheme];

  useEffect(() => {
    console.log("Fetching tasks!");

    const loadTasks = async () => {
      try {
        const fetchedTasks = await getAllTasks();

        if (fetchedTasks.length === 0) {
          Alert.alert("Error", "Failed to fetch tasks.");
        }
        console.log("Tasks fetched: ", fetchedTasks);

        setTasks(fetchedTasks);
        setLoading(false);
      } catch (error) {
        Alert.alert("Error", "Failed to fetch tasks. Reason: " + error);
      }
    };

    loadTasks();
  });

  return (
    <FlatList
      data={tasks}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <TaskListCell entity={item} onPress={selectTask} />
      )}
      contentContainerStyle={theme.listContainer}
      ListEmptyComponent={
        <Text style={theme.emptyText}>No task available!</Text>
      }
    />
  );
};

问题是，useEffect根本没有调用获取数据的代码。但是，当我将状态loading/setLoading从 TasksScreen 移至 TaskList（即从父级移至子级）时，它工作正常。有人能告诉我这里出了什么问题吗？

谢谢。

reactjs