标签: antd

Ant Design 项目被删除了吗？它们是 React 最大的开源前端框架之一。

• 他们在 github 上的项目返回 404：https : //github.com/ant-design/ant-design/
• 他们的网站坏了：https : //ant.design/
• 它们仍然在 npm 上可用：https ://www.npmjs.com/package/antd

我有一个由Form.create()创建的登录表单,但我不能从父组件传递任何道具到这个表单,编译器总是会通知错误

error TS2339: Property 'loading' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Compone
nt<{}, ComponentState>> & Readonly<{ childr...'.

LoginForm.tsx

import * as React from 'react';
import { Form } from 'antd';
import { WrappedFormUtils } from 'antd/lib/form/Form';

interface Props {
    form: WrappedFormUtils;
    loading: boolean;
    username?: string;
}

class LoginForm extends React.Component<Props, {}> {
    render() {
        const { loading } = this.props;
        return (<div>form {loading ? 'true' : 'false'}</div>);
     }
}

export default Form.create()(LoginForm);

LoginPage.tsx

import LoginForm from './components/loginForm';

const loginPage: …

我有一个关于在 CRA (create-react-app) 中集成 Ant Design 库的问题。

在我尝试按照文档中的要求集成它之后，在没有集成 Craco 的情况下，我总是收到以下 4 个警告：

WARNING in ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/antd/dist/antd.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map: 'webpack://antd/./components/config-provider/style/index.less' URL is not supported
 @ ./node_modules/antd/dist/antd.css 8:6-231 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 61:4-74:5 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-201 83:0-201 84:22-29 84:33-47 84:50-64
 @ ./src/components/pages/app/App.tsx 10:0-28
 @ ./src/components/index.ts 3:0-34 4:15-18
 @ ./src/index.tsx 6:0-31 8:38-41

WARNING in ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/antd/dist/antd.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map: 'webpack://antd/./components/icon/style/index.less' URL is not …

我正在使用带有 antd 的 react hook 组件。为表设置列时，渲染函数给我一个 ESLint 错误：

ESLint：组件定义缺少 displayName (react/display-name)

我试过将 displayName 添加到对象中，但这不起作用。

这是错误的样子：

这是代码：

const columns_payment_summary_table = [ 
    {
      title: FooConstants.LABEL_QUANTITY_SELECTED,
      dataIndex: 'group',
      key: 'group',
      render: text => (
        <span>{getCountForCountry(text)}</span>
      ),
    }
  ]

任何人都可以帮忙吗？

这是完整的组件代码（只是相关位）

import * as FooConstants from './constants'
import {connect} from 'react-redux'
import React, {useState, useEffect} from 'react'
import {Card, Table} from 'antd'
import PropTypes from 'prop-types'

const propTypes = {
  foos: PropTypes.object.isRequired,
}

function Foos(props) {

  const [selectedFooRows, setSelectedFooRows] = useState([])

  useEffect(() => { …

我正在为我的反应应用程序使用和设计库.

而且我面临着巨大的进口,这会伤害我的捆绑(目前由于ant-design lib而缩小版本为1.1 mb).

如何通过我的所有应用程序不同地导入antd组件？

更新:

似乎antd有一些巨大的或非优化的模块.这里的东西 - 唯一的区别是导入Datepicker模块,并且繁荣!+差不多2MB(在开发包中)

我想将Next.js与 Sass 和 CSS 模块一起使用，但也想使用Ant Design并想使用 Less 样式来缩小建筑尺寸。

我可以启用 CSS 模块或 Less 加载程序，但不能同时启用。Next.js 中的示例并没有帮助我完成这个问题。

我要建立一个新项目，并希望将这两个包放在一起，但不确定，所以问题是，将 Tailwindcss 与 antdesign 一起使用是一个好的做法吗？

有人有经验吗？

每个包都有自己的主题管理器，例如颜色、排版、深色模式等。你如何管理主题，使用 Tailwinds 或 antd 或两者兼而有之？为什么？

这两个软件包都支持网格，您更喜欢哪一个？

让我们来谈谈您的见解？

经过一番研究，我发现了这些结果

使用这两个库的一些示例：

https://github.com/plamworapot/next-antd-tailwindcss

https://github.com/dospolov/react-redux-saga-antd-tailwind-boilerplate

https://github.com/cunhamuril/pocs

它建议尝试只致力于一个框架

我有一个包含一些元素的网页，并且也Ant.design slider存在。滑块值由 React 状态控制。当滑块工具提示打开时，滑块速度非常慢，在控制台中我看到一条消息[Violation] Forced reflow while executing Javascript took ...。

当滑块工具提示关闭时，滑块速度变为正常。如果我只将鼠标指向滑块手柄（不移动手柄），则消息也会出现在控制台中。

如何使用工具提示修复不良行为？提前致谢！

我有一个带有2列的antd表，需要在第一列上进行过滤，并在第二列上搜索文本。

根据我的代码，该应用程序呈现良好。请注意，标签字段是一个json数组，而不是文本字段，因此我想这与错误有关。

更新了1个代码。

import React, { Component } from 'react';
import {  Table, Tag, Button, Icon, Input} from 'antd';
import { adalApiFetch } from '../../adalConfig';
import Notification from '../../components/notification';
import Highlighter from 'react-highlight-words';

class ListPageTemplatesWithSelection extends Component {

    constructor(props) {
        super(props);
        this.state = {
            data: [],
            filteredInfo: null,
            sortedInfo: null,
            searchText: ''
        };
        this.handleChange= this.handleChange.bind(this);
        this.clearFilters= this.clearFilters.bind(this);
        this.clearAll= this.clearAll.bind(this);
        this.getColumnSearchProps= this.getColumnSearchProps.bind(this);
        this.handleSearch= this.handleSearch.bind(this);
        this.handleReset= this.handleReset.bind(this);

    }

    handleSearch (selectedKeys, confirm){
      confirm();
      this.setState({ searchText: selectedKeys[0] });
    }

    handleReset(clearFilters){
      clearFilters();
      this.setState({ searchText: '' …

我有一个用 Nextjs 构建的网站，它在页面刷新时或当用户直接访问网站到特定路由而不是根路由时打破样式。例如https://vinnieography.web.app/contacts（站点链接如果看起来不错，请尝试刷新并查看）

该网站托管在 Firebase Functions 上，并使用 Nextjs 和Ant 设计组件。

刷新前的网站截图

刷新后的网站截图（注意缺少的导航）

导航并没有完全丢失，但它变成了一个移动导航，它的图标没有显示，但是当你在导航区域周围悬停时，你会得到一个带有导航链接的下拉菜单。

我的 next.config.js

const withCss = require('@zeit/next-css')

module.exports = withCss({
  webpack: (config, { isServer }) => {
    if (isServer) {
      const antStyles = /antd\/.*?\/style\/css.*?/
      const origExternals = [...config.externals]
      config.externals = [
        (context, request, callback) => {
          if (request.match(antStyles)) return callback()
          if (typeof origExternals[0] === 'function') {
            origExternals[0](context, request, callback)
          } else {
            callback()
          }
        },
        ...(typeof origExternals[0] === 'function' ? [] : origExternals),
      ] …