reactjs 相关问题

如何避免在使用 Vite 的生产版本中在 `{{style: url(...)}}` 中输入 `base` 路径

因此，如果您使用 Vite 构建和部署 React 应用程序，则在内部您将使用导入在组件之间引入图像，因此 Vite 将负责简化您的 url 管理，

如何仅使用react-big-calendar进行月视图

我正在尝试使用react-big-calendar，仅用于查看月份并允许用户按某个日期，这应该触发我自己的功能。那是我不感兴趣（并且想删除...

React Native 创建应用程序并在 xcode 上运行它出现错误 ReactCodegen

我正在使用以下命令在 React-Native 中创建一个普通的应用程序。 npx React-Native init SampleApp && cd ios && pod install 当在 xcode 中运行应用程序时，得到以下信息：

如何将 @tanstack/react-router Link 组件与 React MUI Link 组件结合起来？

我正在使用 Tanstack Router Link 组件在我的应用程序中导航（类型安全）。但对于 UI，我想依赖 React MUI Link 组件。 这是我目前使用两者结合的方法（

使用 vitest 响应自定义钩子测试返回空结果

我创建了一个自定义钩子，如下所示： 从 '@/scripts/services/userService' 导入 { getUserInfo }； 从 'react' 导入 { useState, useEffect }; const useFileFilter = (repositoryFiles: any[]) =...

useReducer 显示 React 中不同组件的初始状态

我试图在整个应用程序的状态中设置loginFlag。我正在使用 useReducer 挂钩来执行该操作。看起来状态仅限于我发送操作的页面 A...

UseEffect和SetInterval，创建无限循环并刷新会话

我想继续提出请求，因为每当我将商品添加到购物车时，显示购物车中商品数量的漫画都必须更新。但这不断刷新我的会话，所以当...

如何在我的网站上进行侧边跟踪？

我有一个设计，我想构建它，它有一个侧跟踪部分。它跟踪用户所在的部分并更改样式。但是，我在互联网上找不到类似的东西

React Native Expo 应用程序的 Web 捆绑过程中出现错误

我在“npx expo start”期间收到以下错误并运行我的 React Native 应用程序的网络版本。 无法解析模块 ../../Utilities/Platform 颂歌模块 eact-native\Libraries\Compon...

使用 npx create-react-app 创建 React 应用程序时出现 npm 错误

[输入图像描述在此处输入图像描述](https://i.sstatic.net/AJmLnAr8.png) 嘿 ！我正在学习 React，我正在从 CMD 创建 React 文件夹（npx create-react-app firstreactapp）。它

如何确保 TextField 最多接受 255 个字符并在超出时显示警告？

我希望这个来自 Macial UI 文本字段的 TextField 组件具有 我想要这个来自 Macial UI Text Field 的 TextField 组件 <TextField value={value} label='Ana iş Adımı' multiline onChange={onChange} placeholder=' ' error={Boolean(errors.definition)} aria-describedby='validation-basic-definition' sx={{ mb: 2, backgroundColor: isUpdateMode && '#EBF3F7', rounded: 4 }} /> 最大长度为 255 个字符。如果超过 255 个字符的限制，我希望在下面显示一条红色警告消息，如下图所示：pic，但我不想只包含 <TextField ... inputProps={{ maxLength: 255 }} /> 到文本字段，因为它不显示红色警告消息。它仅强制执行字符限制。我的整个页面是： import React, {useEffect, useState} from "react"; import Grid from "@mui/material/Grid"; import Typography from "@mui/material/Typography"; import Box from "@mui/material/Box"; import Tooltip from "@mui/material/Tooltip"; import IconButton from "@mui/material/IconButton"; import Icon from "../../../@core/components/icon"; import {Controller, useForm} from "react-hook-form"; import restClient from "../../../rest/client"; import mappings from "../../../mappings/mapping"; import toast from "react-hot-toast"; import Card from "@mui/material/Card"; import CardHeader from "@mui/material/CardHeader"; import CardContent from "@mui/material/CardContent"; import FormControl from "@mui/material/FormControl"; import TextField from "@mui/material/TextField"; import FormHelperText from "@mui/material/FormHelperText"; import InputLabel from "@mui/material/InputLabel"; import Select from "@mui/material/Select"; import MenuItem from "@mui/material/MenuItem"; import Button from "@mui/material/Button"; import { DataGrid, gridPageCountSelector, GridPagination, GridToolbarContainer, GridToolbarExport, GridToolbarFilterButton, GridToolbarQuickFilter, useGridApiContext, useGridSelector } from "@mui/x-data-grid"; import DeleteDialog from "../../../views/components/company/DeleteDialog"; import MuiPagination from "@mui/material/Pagination"; import secureLocalStorage from "react-secure-storage"; const defaultValues = { id: '', definition: '', orderNo: '', companyRequest: null, }; function CustomToolbar() { return ( <GridToolbarContainer> <GridToolbarQuickFilter/> </GridToolbarContainer> ); } function Pagination({page, onPageChange, className}) { const apiRef = useGridApiContext(); const pageCount = useGridSelector(apiRef, gridPageCountSelector); return ( <MuiPagination color="warning" className={className} count={pageCount} page={page + 1} onChange={(event, newPage) => { onPageChange(event, newPage - 1); }} /> ); } function CustomPagination(props) { return <GridPagination ActionsComponent={Pagination} {...props} />; } const CompanyJobDescription = () => { const [companyJobDescriptionLList, setCompanyJobDescriptionList] = useState([]); const [selectedId, setSelectedId] = useState(); const [openDelete, setOpenDelete] = useState(false); const [isUpdateMode, setIsUpdateMode] = useState(false); const { control, handleSubmit, formState: { errors }, reset, setValue, watch: valueWatch } = useForm({ defaultValues, }); const columns = [ { flex: 0.01, minWidth: 100, headerName: 'S.N', field: 'orderNo', renderCell: (params) => ( <Typography variant="body2" sx={{ color: 'text.primary' }}> {params.row.orderNo} </Typography> ) }, { flex: 1, minWidth: 200, field: 'definition', headerName: 'Ana İş Adımı', renderCell: (params) => ( <Typography variant="body2" sx={{ color: 'text.primary', whiteSpace: 'pre-wrap', overflow: 'auto', maxHeight: '50px', pt: 1 }} > {params.row.definition} </Typography> ) }, { flex: 0.05, minWidth: 140, field: 'actions', headerName: 'İşlemler', renderCell: (params) => { const id = valueWatch("id"); return ( <Box sx={{ display: 'flex', alignItems: 'center' }}> <Tooltip title="Düzenle"> <IconButton size="small" color="warning" sx={{ mr: 0.5 }} onClick={() => updateJobDescription(params)} > <Icon icon="mi:edit" /> </IconButton> </Tooltip> <Tooltip title="Sil"> <IconButton size="small" color="error" onClick={() => showDeleteModal(params)} > <Icon icon="mdi:delete-outline" /> </IconButton> </Tooltip> {id === params.row.id && ( <Tooltip title='Güncellemeyi İptal Et'> <IconButton size='small' color="error" onClick={resetForm}> <Icon icon='material-symbols:cancel-outline' /> </IconButton> </Tooltip> )} </Box> ); } } ]; const handleConfirmDelete = () => { deleteCompanyJobDescription(selectedId); setOpenDelete(false); }; const updateJobDescription = params => { const { id, definition, orderNo } = params.row; setValue('id', id); setValue('orderNo', orderNo); setValue('definition', definition); setIsUpdateMode(true); // Güncelleme modunu etkinleştir }; const showDeleteModal = (params) => { setSelectedId(params.row.id); setOpenDelete(true); }; const deleteCompanyJobDescription = (selectedId) => { restClient.delete(mappings.companyJobDescription.deleteCompanyJob(selectedId)).then(() => { getCompanyJobDescription(); setOpenDelete(false); toast.success("Görev Tanımı başarıyla silindi."); }).catch(() => { toast.error("Görev Tanımı silinirken hata oluştu."); }); }; const getCompanyJobDescription = () => { const company = JSON.parse(secureLocalStorage.getItem("companyInfo")); restClient.get(mappings.companyJobDescription.getCompanyJobDescriptionByCompanyId(company?.id)).then(res => { setCompanyJobDescriptionList(res.data.data); }); }; useEffect(getCompanyJobDescription, []); const onSubmit = (companyJobDescription) => { companyJobDescription.companyRequest = JSON.parse(secureLocalStorage.getItem("companyInfo")); const isOrderNoUnique = !companyJobDescriptionLList.some( (item) => item.orderNo === parseInt(companyJobDescription.orderNo) && item.id !== companyJobDescription.id ); if (!isOrderNoUnique) { toast.error("Bu sıra numarası zaten mevcut. Lütfen farklı bir sıra numarası girin."); return; } restClient.post(mappings.companyJobDescription.addCompanyJobDescription(), companyJobDescription) .then(() => { toast.success("Görev Tanımı başarıyla kaydedildi."); getCompanyJobDescription(); resetForm(); }).catch((error) => { console.error("Görev Tanımı oluşturulurken bir hata oluştu: ", error); toast.error("Görev Tanımı oluşturulurken hata oluştu."); }); }; const resetForm = () => { reset(); setIsUpdateMode(false); // Güncelleme modunu kapat }; return ( <> <Card sx={{ mb: 2 }}> <CardHeader sx={{ mb: 0 }} title="Görev Tanımı Jenerik Maddeleri Ekle" avatar={ <IconButton> <Icon icon={isUpdateMode ? 'mi:edit' : 'mdi:plus'} /> </IconButton> } /> <CardContent> <Grid sx={{ pb: 5 }}> <form onSubmit={handleSubmit(onSubmit)}> <Grid container spacing={5}> <Grid item xs={12} sm={12}> <FormControl fullWidth> <Controller name='orderNo' control={control} rules={{ required: true }} render={({ field: { value, onChange } }) => ( <TextField value={value} label='Sıra Numarası' onChange={onChange} placeholder=' ' error={Boolean(errors.orderNo)} aria-describedby='validation-basic-orderNo' sx={{ mb: 2, backgroundColor: isUpdateMode && '#EBF3F7', rounded: 4 }} /> )} /> {errors.orderNo && ( <FormHelperText sx={{ color: 'error.main' }} id='validation-basic-orderNo'> Bu alan zorunlu. </FormHelperText> )} </FormControl> </Grid> <Grid item xs={12} sm={12}> <FormControl fullWidth> <Controller name='definition' control={control} rules={{ required: true }} render={({ field: { value, onChange } }) => ( <TextField value={value} label='Ana iş Adımı' multiline onChange={onChange} placeholder=' ' error={Boolean(errors.definition)} aria-describedby='validation-basic-definition' sx={{ mb: 2, backgroundColor: isUpdateMode && '#EBF3F7', rounded: 4 }} /> )} /> {errors.definition && ( <FormHelperText sx={{ color: 'error.main' }} id='validation-basic-definition'> Bu alan zorunlu. </FormHelperText> )} </FormControl> </Grid> <Grid item xs={12} sm={12} sx={{ display: 'flex' }}> <Button fullWidth size='large' type='submit' variant='contained'> {isUpdateMode ? "Güncelle" : "Kaydet"} </Button> </Grid> </Grid> </form> </Grid> <Box sx={{ height: 700 }}> <DataGrid columns={columns} rowsPerPageOptions={[7, 10, 25, 50]} rows={companyJobDescriptionLList} sortModel={[ { field: 'orderNo', sort: 'asc', }, ]} slots={{ toolbar: CustomToolbar, pagination: CustomPagination, }} pagination getRowHeight={() => "auto"} /> </Box> </CardContent> </Card> <DeleteDialog onConfirm={handleConfirmDelete} open={openDelete} setOpen={setOpenDelete} /> </> ); } export default CompanyJobDescription; <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script> 我是 stackoverflow 的新用户。如果我在提问时犯了错误，我深表歉意。 你可以做类似的事情 ... const [text, setText] = useState(""); const [error, setError] = useState(false); const handleChange = (event) => { const value = event.target.value; if (value.length <= 255) { setText(value); setError(false); } else { setError(true); } }; ... return ( ... <TextField ... value={value} onChange={handleChange} error={error} /> {error && ( <Typography variant="caption" color="error"> Maximum character limit is 255 </Typography> )}

如何在react组件中测试jsoneditor

我在我的 React 组件中使用 jsoneditor 示例代码： 从 'react' 导入 React, { useEffect, useRef } 从“jsoneditor”导入 JSONEditor； 导入 'jsoneditor/dist/jsoneditor.css'; 经验...

React 查询挂钩在初始加载时未运行

这是我的 React 组件。我想要开始工作的钩子是 useGetNotesQuery。 组件初始加载时，它不会运行。如果我切换选项卡，或者创建一个新笔记，那么钩子将是...

为什么我需要一个花哨的 jsx 语法来实现 React Contexts

我已经离开前端 js 场景有一段时间了，现在尝试赶上 React 等。 我真的不明白上下文。首先你需要在某处创建一个上下文，然后你可以使用 我已经离开前端 js 场景有一段时间了，现在尝试赶上 React 等。 我真的不了解上下文。首先你需要在某处创建一个上下文，然后你可以使用<Context.Provider> <Child/> </Context.Provider>，然后你需要挖掘<Child>中创建的上下文实例的引用来使用它。我猜还有 <Context.Consumer> 组件。 为什么我不只是有一个 globalcontext.ts 来放置一些变量和方法，然后将其导入到我需要的地方？我是不是错过了什么？ TLDR； 上下文可让您提供一些范围内的状态： 可以在上下文提供者包装的组件内访问 比道具更广泛 比全局变量范围更窄 反应式（即读取上下文的子级将在更改时重新渲染。） 文档很好地解释了这一点。

重新绘制笛卡尔网格 - 垂直和水平线的不同样式

我想要实现的是： 如何将 CartesianGrid 配置为在水平轴上有虚线，在垂直轴上有实线？

如何在自定义输入组件中处理 React Hook 表单验证？

我正在使用 React Hook Form 来处理我的 React 项目中的表单验证。虽然使用普通元素时一切正常，但当我尝试将输入包装在自定义组件中时遇到问题......

为什么clearTimeout没有清除这个react组件中的超时？

我试图在启动新的超时之前清除以前的超时，因为我希望消息显示 4 秒并消失，除非在 4 秒结束之前弹出新消息。

如何处理错误以停止函数执行

它会转到突变中的 onError，但是在 try catch 中，下一个响应的状态为 200，因此它不会执行 catch 方法。我应该怎么做，这样如果它转到 onError，它就会...

如何在幻灯片中使用自动完成功能？

我有一个 useAutocomplete ，我在 Slide MUI 组件中实现了它： 我有一个 useAutocomplete，我在 Slide MUI 组件中实现： <Slide in={isOpen} timeout={{ enter: 300, exit: 200 }} mountOnEnter unmountOnExit > <div {...getRootProps()}> <TextField variant="outlined" label="search" size="small" value={searchInput} autoFocus onChange={(e) => setSearchInput(e.target.value)} InputLabelProps={{ ...getInputLabelProps() }} inputProps={{ ...getInputProps() }} InputProps={{ endAdornment: ( <InputAdornment position="end"> <SearchIcon /> </InputAdornment> ), }} /> <List {...getListboxProps()}>{optionsList}</List> </div> </Slide> 当 isOpen（prop）为 false 时，我收到此错误： 找不到输入元素。当需要 HTMLInputElement 时，它被解析为 null。相反，useAutocomplete 需要一个输入元素。确保您已正确绑定 getInputProps 并保证正常的引用/效果解析顺序。* 如何解决此错误，同时保留幻灯片提供的动画？ 首先，请注意您正在使用的某些 API 已被弃用。参考这个 所以，这部分代码现在应该是，其中 slotProps 是 TextField 的 prop： slotProps={{ inputLabel: { ...getInputLabelProps() }, htmlInput: { ...getInputProps() }, input: { endAdornment: ( <InputAdornment position="end"> <SearchIcon /> </InputAdornment> ), }, }} 然后，我检查了错误并测试了渲染。原因可能是组件开始在服务器上渲染（例如，如果您正在使用服务器组件），因此引用存在边界问题。相反，您可能必须将组件移动到客户端文件并在未设置 SSR 的情况下导入它

如何使用 Vite 和 React 处理单独的入口点

目前我有一个Vite项目，构建了一个react应用程序： Vite 配置如下所示： 从“vite”导入{defineConfig}； 从“@vitejs/plugin-react-swc”导入反应； // 投票配置 出口德...