问题[reactjs]

请告诉我如何将颜色值从外部对象转发到组件并将其直接应用于对象？在这种情况下，我的颜色存储在 Color.jsx 文件中，我将它们连接到根组件并希望将它们转发到 ItemCard，并通过它转发到 Btn，但没有任何反应......我查看了一堆指南并不知道如何传播正在发挥作用。 UPD：感谢评论员，我更正了寄存器，现在它给出了一个错误，Cannot read property "active" of undefined.它位于根组件中，如果您删除 itemCard 道具的转发，那么一切至少都可以工作。那么如何传递道具呢？

import Color from '../constansts/Color.jsx'

export default function App() {
    return (
        <SafeAreaView style={BasicStyles.container}>
          <StatusBar style="auto" />
          <Header/>
          <HomeSlider/>
          <ItemCard color={Color.active}/>
        </SafeAreaView>
    );
}

export default function ItemCard(props) {
    return (
        <View>
          <Btn color={props.Color.active}/>
        </View>
    )
}

export default function Btn(props) {
    return (
        <Pressable style={ButtonStyles.wrapper} color={props.color.active}>
    )
}

在DRF服务器上，授权API工作正常（我使用jwt）。但是当我尝试从 React 中执行相同操作时，我收到消息 Cannot POST /login。服务器上没有关于post请求的信息，即问题出在前端。

const Login = () => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');

    const loginUser = async () => {
        try {
            const response = await axios.post('http://127.0.0.1:8000/api/v1/token/', { username, password });
            localStorage.setItem('access', response.data.access);
            localStorage.setItem('refresh', response.data.refresh);
            setError('');
        } catch (err) {
            setError(err.response.data.message);
        }
    };

    return (
        <div>
            <form class="form_auth_style" method="post">
                <div class="form-group">
                    <input class="form-control item" type="text" name="username" placeholder="Логин" required />
                </div>
                <div class="form-group">
                    <input class="form-control item" type="password" name="password" placeholder="Пароль" required />
                </div>
                <div class="form-group">
                    <button class="btn btn-primary btn-block create-account" type="submit">Вход в аккаунт</button>
                </div>
            </form>
        </div>
    );
};

export default Login;

使用 typescript 测试 React 应用程序时出现错误。几个小时后，我意识到错误在于样式的导入方式。我花了几个小时在 gpt 聊天上，但没有多大帮助。当我像这样导入类时： import * as cls from './Button.module.scss'; concole.log(cls)返回Module {__esModule: true, Symbol(Symbol.toString Tag): 'Module'} 应用程序中没有错误，但与类相关的测试（玩笑）中有错误。

当我使用时： import cls from './Button.module.scss'; 应用程序中弹出错误：

TypeError: Cannot read properties of undefined (reading 'Button')
    at Button (http://localhost:3000/main.28f6bcc41182abdc5bde.js:5916:153)
    at renderWithHooks (http://localhost:3000/main.28f6bcc41182abdc5bde.js:23669:18)
    at mountIndeterminateComponent (http://localhost:3000/main.28f6bcc41182abdc5bde.js:28281:13)
    at beginWork (http://localhost:3000/main.28f6bcc41182abdc5bde.js:29804:16)
    at HTMLUnknownElement.callCallback (http://localhost:3000/main.28f6bcc41182abdc5bde.js:12347:14)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/main.28f6bcc41182abdc5bde.js:12396:16)
    at invokeGuardedCallback (http://localhost:3000/main.28f6bcc41182abdc5bde.js:12460:31)
    at beginWork$1 (http://localhost:3000/main.28f6bcc41182abdc5bde.js:35668:7)
    at performUnitOfWork (http://localhost:3000/main.28f6bcc41182abdc5bde.js:34774:12)
    at workLoopConcurrent (http://localhost:3000/main.28f6bcc41182abdc5bde.js:34760:5)

console.log(cls)返回 Object，但通过此导入，测试中没有错误。

webpack.config.js：

const cssLoader = {
    test: /\.s[ac]ss$/i,
    use: [
        // Creates style nodes from JS strings
        isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
        {
            loader: "css-loader",
            options: {
                modules: {
                    auto: (resPath: string) => Boolean(resPath.includes('.module.')),
                    localIdentName: isDev
                        ? '[path][name]__[local]--[hash:base64:8]'
                        : '[hash:base64:8]'
                }
            }
        },
        "sass-loader",
    ],
}

我没有对此文件进行任何更改。

全局.d.ts：

declare module '*.scss' { 
    interface IClassNames {
        [className: string]: string
    }
    const classNames: IClassNames;
    export = classNames;
}

这里我尝试用类型替换界面，但实际上设计本身保持不变。

笑话.config.ts：

moduleNameMapper: {
    '\\.(s?css)$': 'identity-obj-proxy',
},

在这里我还使用了不同的选项来指定文件扩展名，尽管这些更改没有意义

babel.config.json：

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-typescript",
        [
            "@babel/preset-react",
            {
                "runtime": "automatic",
            }
        ]
    ],
    "plugins": [
        "i18next-extract"
    ]
}

我没怎么接触过巴贝尔。

我添加到 Button.tsx 问题 ：

import { classNames } from 'shared/lib/classNames/classNames';
import cls from './Button.module.scss';
import { ButtonHTMLAttributes, FC } from 'react';

export enum ThemeButton {
    CLEAR = 'clear',
    PRIMARY = 'primary'
}

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    className?: string;
    theme?: ThemeButton;
}

export const Button: FC<ButtonProps> = (props) => {
    const {
        className,
        children,
        theme,
        ...otherProps
    } = props;

    return (
        <button
            type='button'
            className={classNames(cls.Button, {}, [className, cls[theme]])}
            {...otherProps}
        >
            {children}
        </button>
    )
}

我添加到问题 2 Button.module.scss：

.Button {
    cursor: pointer;
}

.clear {
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    outline: none;
}

告诉我如何消除错误并切换到import cls?

我正在尝试对不同类的按钮实现这样的替换 - 代码优化。它适用于一个人，但不适用于我，资源管理器不会进行替代，它只是在浏览器中添加条件。告诉我如何解决它？

function Button({type, title, disable, onclick}) {
  return (

<button className={'btn ${type === "add" && "add")||(type === "remove" && "remove")||(type === "checkout" && "checkout"}'}
    disable={disable}
    onclick={onclick}
    >{title}
    </button>

);}

export default Button;

底线：当我创建一个新的待办事项时，它被写入本地存储，并且在页面重新加载后，我希望显示保存的待办事项，但本地存储在页面重新加载后被清除。

主页.tsx

'use client'
import React, { FormEvent, forwardRef, useEffect, useRef, useState } from 'react'
import { Box, Button, Stack, TextField, Typography } from '@mui/material'
import styles from './mainPage.module.scss'
import { useTodo } from '../../hooks/useTodo'
import { describe } from 'node:test'

const MainPage = () => {

    useEffect(() => {
        set(JSON.parse(localStorage.getItem('todoArray') || '[]'))
    }, [])

    const { functions, get, set } = useTodo()
    const titleRef = useRef<HTMLInputElement>()
    const descRef = useRef<HTMLInputElement>()


   

    const sendTodo = (e: FormEvent) => {
        e.preventDefault()
        if (!titleRef.current?.value || !descRef.current?.value) return
        functions.create(titleRef.current.value, descRef.current.value)
        titleRef.current.value = ''
        descRef.current.value = ''
    }

    return (
        <div className={styles.root}>
            <Stack className={styles.form} spacing={1} component='form' onSubmit={(e) => sendTodo(e)}>
                <TextField inputRef={titleRef} sx={{ width: '30%' }} id="outlined-basic" label="Outlined" variant="outlined" />
                <TextField inputRef={descRef} sx={{ width: '30%' }} id="outlined-basic" label="Outlined" variant="outlined" />
                <Button sx={{ width: '30%' }} type='submit' variant='outlined'>Create</Button>
            </Stack>
            <div className={styles.todoView}>
                {get.map((todo, i) =>
                    <Box key={i} className={styles.todoBody}>
                            <Stack gap={1} flexDirection='row' alignItems='center'>
                                <Typography variant='h6'>{i + 1}.</Typography>
                                <Typography variant='h6'>{todo.title}</Typography>
                            </Stack>
                            <Typography sx={{ wordWrap: 'break-word' }}>{todo.description}</Typography>
                            <Button sx={{ mt: 1 }} variant='contained' onClick={() => functions.delete(todo.id)} color='error'>Delete</Button>
                    </Box>
                )}
            </div>
        </div>
    )
}

export default MainPage

useView.ts

import React, { FormEvent, useEffect } from "react"


export interface ITodo {
    id: number
    title: string
    description: string
}

export interface IUseTodoReturn {
    functions: {
        create: (title: string, description: string) => void
        delete: (id: number) => void
    }
    get: ITodo[]
    set: (array: ITodo[]) => void
}


export const useTodo = (): IUseTodoReturn => {

    const [todo, setTodo] = React.useState<ITodo[]>([])

    useEffect(() => {
        localStorage.setItem('todoArray', JSON.stringify(todo))
    }, [todo])

    const set = (array: ITodo[]) => {
        setTodo(array)
    }

    const createTodo = (title: string, description: string): void => {
        setTodo([...todo, { id: Date.now(), title, description }])
    }


    const deleteTodo = (id: number) => {
        const filteredArray = todo.filter(todo => todo.id !== id)
        setTodo(filteredArray)
    }


    return {
        functions: { create: createTodo, delete: deleteTodo },
        get: todo,
        set
    }
}