antd 相关问题

我的 Antd Pro 项目在 Vscode 中显示打字稿错误。 “ProFormSelect”不能用作 JSX 组件。它的类型 '((props: ProFormSelectProps) => ReactElement 我的 Antd Pro 项目在 Vscode 中显示打字稿错误。 'ProFormSelect' cannot be used as a JSX component. Its type '(<T = any>(props: ProFormSelectProps<T>) => ReactElement<any, string | JSXElementConstructor<any>>) & { SearchSelect: <T>(props: ProFormSelectProps<...>) => ReactElement<...>; }' is not a valid JSX element type. Type '(<T = any>(props: ProFormSelectProps<T>) => ReactElement<any, string | JSXElementConstructor<any>>) & { SearchSelect: <T>(props: ProFormSelectProps<...>) => ReactElement<...>; }' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'. Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'. Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'. 我使用 Antd Pro 组件。安装全新的 Windows 11 系统后，我在所有 Antd Pro 组件中都遇到此错误。我在旧的相同操作系统上没有错误。所以这很奇怪，不知道如何解决。 Environment: Windows 11, Latest Visual Studio Code Nodejs: v18.17.0 Main packages info: "react": "^17.0.0", "react-dom": "^17.0.0", "typescript": "^4.5.0", "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", "@umijs/fabric": "^2.8.0", "@ant-design/compatible": "^1.1.0", "@ant-design/icons": "^4.7.0", "@ant-design/pro-card": "^1.19.0", "@ant-design/pro-descriptions": "^1.10.0", "@ant-design/pro-form": "^1.64.0", "@ant-design/pro-layout": "^6.35.0", "@ant-design/pro-table": "^2.71.0", "@babel/runtime": "^7.20.6", "@lexical/react": "^0.3.6", "@tinymce/tinymce-react": "^4.1.0", "@umijs/route-utils": "^2.0.0", "antd": "^4.19.0", 将React包的版本升级到18.x，然后在VSCode中重新启动TS服务器。

reactjs typescript antd ant-design-pro

回答 1 投票 0

如果我在 React.js 中使用 cellRender，antd 日历会重复日期

我尝试重用 antd 日历组件几个月，并在每个日历上突出显示一些特定的日子（浅绿色）。为了执行此功能，我使用 cellRender 来自定义校准...

javascript reactjs antd ant-design-pro

回答 1 投票 0

具有垂直和水平滚动功能的Ant Design Table

我正在使用 Ant Design Table 来显示来自公司内部 API 的动态数据。这意味着我不知道将收到什么样的数据来填充每个单元格。它可以是一个大文本，一个

html css reactjs antd

回答 4 投票 0

如何减少 <Form> 中元素之间 ant design 应用的默认边距/填充？

我正在使用ant design ，我想将内的价格图元素之间的间距设置得更小。我尝试设置 style={{margin:"0px"}... 我正在使用 ant design <Form layout="vertical">，并且我想将 <Form> 内的价格地图元素之间的间距设置得更小。我尝试在元素上设置 style={{margin:"0px"}} 但它在 UI 上没有变化。这是价格图的代码。 <Form.Item label="Price Map" rules={[{ required: true, message: "Please input Prices!" }]} > {selectedProducts.flatMap(productId => products .filter(product => product.id === productId) .map(product => ( <Input.Group compact layout="horizontal"> <Form.Item label={product.productName + " : "} /> {product.priceList.map(priceObj => ( <Input defaultValue={priceObj.price} addonBefore={priceObj.type} rules={[ { required: true, message: "Please input price!" } ]} style={{ width: "34%" }} /> ))} </Input.Group> )) )} </Form.Item> <Form.Item style={{ marginBottom: 0 }} /> 我可以通过为 style={{ marginBottom: 5 }} 设置 <Input> 来实现此目的这是我更新的代码。 <Form.Item label="Price Map" rules={[{ required: true, message: "Please input Prices!" }]} > {selectedProducts.flatMap(productId => products .filter(product => product.id === productId) .map(product => ( <Input.Group compact layout="horizontal"> <div style={{ marginRight: 5 }}> { product.productName + " : " }</div> {product.priceList.map(priceObj => ( <Input defaultValue={priceObj.price} addonBefore={priceObj.type} rules={[ { required: true, message: "Please input price!" } ]} onChange={(changedValue) => { setPriceMap({ ...priceMap, [priceObj.priceId]: priceObj.price }); }} style={{ width: "34%" , marginBottom: 5 }} /> ))} </Input.Group> )) )} </Form.Item> 如果你使用 React，它会是这样的： <Form.Item ... labelCol={{ style: { padding: 0 } }} />

javascript reactjs antd

回答 3 投票 0

ant 设计更改禁用时选择背景颜色

我试图在禁用时更改选择下拉列表的背景颜色。我正在测试： .ant-select-disabled .ant-select-selection{background-color: red} 没有运气。例如，在 r...

antd ant-design-pro antdv ant-design-vue

回答 4 投票 0

为什么我的组件永远无法获取我正在设置的属性值？

我有一个反应组件和一个方便的功能，可以将其打印在蚂蚁设计中和，以便于在表单构建中使用，但无论传递什么......

reactjs antd

回答 1 投票 0

antd柱形图：标签值显示在图表之外

我有一个相当简单的蚂蚁柱形图，就是这样：从“反应”导入反应；从“react-dom”导入ReactDOM；从“@ant-design/plots”导入{Column}；常量

charts antd

回答 2 投票 0

为什么在包含 DatePicker 时渲染我的 antd 表单失败？

我有一个组件可以呈现一个简单的表单，如下所示： const { saveButtonProps, formProps, formLoading, queryResult } = useForm(); 返回（ ... 我有一个组件，可以呈现一个如下所示的简单表单： const { saveButtonProps, formProps, formLoading, queryResult } = useForm(); return ( <Form {...formProps} layout='vertical'> <Form.Item hidden name="id" /> <....blah blah blah, other form items.../> <Row gutter={[32, 32]}> <Col span={8}> <Form.Item name="reportDate" label="Report Date" initialValue={dayjs(formProps?.initialValues?.reportDate)}> <DatePicker placeholder="Report Date" /> </Form.Item> </Col> </Row> </Form> ) 但是，当我导航到该页面时，没有任何内容呈现，并且出现“date4.isValid 不是函数”的错误。查看堆栈跟踪，它被 PickerInput/hooks/useFieldsInvalidate 抛出，最终跟踪到 rc-picker/es/generate/dayjs.js。我认为 useForm 发现我想在组件内渲染从服务器返回的 JSON 中的“reportDate”值，并立即将其视为 dayjs 类型对象？如果我将的控件更改为标准输入之类的内容，则页面呈现得很好并包含我期望的数据。如果我将 DatePicker 组件放在表单之外，并将其初始值设置为 dayjs(formProps?.initialValues?.reportDate)，它也会正确设置日期。那么在对 useForm 的调用中我需要做一些额外的事情来让它将返回值转换为其从一开始就明显期望的格式吗？注意：这一切都是使用Refine框架完成的，因此对useForm的调用来自@refinedev/antd。想通了。我没有尝试在initialValue 中进行翻译，而是添加了getValueProps={(value) => ({ value: value ? dayjs(value) : "", })}，这样就可以正常工作了。

reactjs antd react-refine

回答 1 投票 0

ant design 中如何调整基于多语言的 Form 项中的搜索字段组件的文字方向？

我想根据用户输入的语言自动调整搜索字段中的文本方向。例如，如果他正在输入阿拉伯语，请将文本方向切换为 rtl，如果 h...

html css reactjs antd

回答 1 投票 0

无法让 Ant Design 与 Vue 3 微前端应用程序配合使用

我正在使用 vite-plugin-federation 使用 Vue 3 创建一个微前端应用程序。有一个公开组件的远程应用程序，还有一个将使用这些组件的主机应用程序。我去过

vue.js vite antd micro-frontend ant-design-vue

回答 1 投票 0

我将时间选择器格式化为 HH:mm 但在前端输入后，在后端仍将 00:00 作为输入。这是什么问题？

我将时间选择器格式化为 HH:mm 但在前端输入后，在后端仍将 00:00 作为输入。我希望它从前端获取正确的输入并将其存储到