Ant-design: 💥 Ant Design 4.0 est en cours!

Créé le 31 mai 2019  Â·  182Commentaires  Â·  Source: ant-design/ant-design

Aperçu du site

next.ant.design


résumer

Cela fait 16 mois depuis décembre 2017 lorsque Ant Design 3.0 est sorti. Nous avons corrigé de nombreux bugs et ajouté de nombreuses nouvelles fonctionnalités ( changelog ) dans 4289 commits, 138 versions, 7675 problèmes et PR, ce qui nous a apporté 25375 étoiles dans GitHub. Nous avons également publié Ant Design Pro 4.0 . Prise en charge de TypeScript, des blocs et de l'abstraction des mises en page. Nous tenons à remercier tous les contributeurs et votre contribution rend Ant Design de mieux en mieux.

Dans le même temps, nous avons publié Ant Design Pro 4.0. Support TypeScript, Block et fournit le composant de mise en page

En ce moment, nous pensons: Ok alors, quelle est la prochaine étape? Que pouvons-nous faire pour que Ant Design aille plus loin? Il est temps de planifier le Ant Design 4.0! 🍻

Voici le plan détaillé sur 4.0. Nous pouvons ajuster certains d'entre eux car ils sont toujours en cours de planification.

🌓 À propos de la compatibilité

Nous supprimerons les accessoires obsolètes dans la version 4.0, ce qui signifie que les accessoires obsolètes ne seront plus pris en charge. Si vous ne recevez aucun avertissement de la dernière version 3.x, la mise à niveau sera transparente. Sinon, il y aura une phase de maintenance de six mois pour la version 3.0 après la sortie de la version 4.0.

Nous savons qu'il est difficile d'effectuer des mises à niveau. Nous prévoyons de fournir un package compatible pour gérer cela:

import Compatible from '@ant-design/compatible';

// It works, but will warning in console
const Demo = () => (
  <Compatible>
    <YourApp />
  </Compatible>
);

Ce package sera disponible jusqu'à la fin de la phase de maintenance 3.x.

Utilisez la dernière API React

Nous avons fourni le support React 15 depuis longtemps. Mais cela ne semble pas nécessaire d'après les retours sociaux (il y a près de 0% de problèmes avec React 15), car React a une forte compatibilité. Pour prendre en charge React 15, nous utilisons la nouvelle API très soigneusement. Ce ne sera plus un problème après la version 4.0:

  • Fournit l'API Hooks pour le composant associé
  • Prise en charge du mode simultané (toujours en préparation, continuera à s'ajuster dans 4.0)
  • Embrassez React 17 (wow! ~)

Arrêter le support IE9 / 10

Ant Design 3.0 consacre beaucoup d'efforts à la prise en

Autre mise à jour compatible

  • Less 2.x mise à niveau vers Less 3.x
  • Réglage des icônes
  • Mention obsolète

📦 Réduisez la taille

Optimiser la taille de l'icône

Nous utilisons l'icône svg ( pourquoi svg? ) Après [email protected] . Nous utilisons le nom de la chaîne pour mapper l'icône, qui ne peut pas se charger à la demande. Nous importons tous les fichiers d'icônes dans antd, ce qui augmente la taille du bundle . Nous allons gérer cela dans 4.0.

L'ancienne méthode d'utilisation de l'icône sera * obsolète *:

import { Icon, Button } from 'antd';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

Utilisera plutôt une icône d'importation unique dans la version 4.0:

// Directly import
import SmileOutline from 'antd/icons/SmileOutline';

// If tree-shaking supported
import { SmileOutline } from 'antd/icons';

const Demo = () => (
  <div>
    <SmileOutline />
    <Button icon={<SmileOutline />} />
  </div>
);

Vous pouvez toujours utiliser une manière compatible à l'ancienne.

Supprimer Draft.js

Nous utilisons Draft.js dans le composant Mention pour confirmer l'emplacement de la fenêtre contextuelle, mais seule une petite partie de ses fonctionnalités est utilisée. Cela semble trop cher. Nous prévoyons de supprimer Draft.js dans la version 4.0 et d'utiliser une autre solution légère à la place. En même temps, pour faire la distinction avec le composant d'origine Mention de la version 3.0, un nouveau composant Mentions sera introduit pour éviter les conflits d'API. En outre, il prend en charge de manière compatible :

// Follow Code will not work
import { Mention } from 'antd';

const Demo = () => (
  <Mention />
);
// Added `Mentions` in 4.0
import { Mentions } from 'antd';

const Demo = () => (
  <Mentions />
);

🧭 Optimisation des performances

Nous avons quelques problèmes de performances pour un ensemble de données volumineux de la communauté. Nous nous assurerons qu'une optimisation sera effectuée ici.

Défilement virtuel

Le défilement virtuel est un moyen courant d'optimiser les performances. Nous prévoyons de prendre en charge cela de manière native dans les composants. Il peut ne pas se terminer immédiatement dans la version 4.0. Intègre pas à pas.

Refactoriser l'animation

Nous avons fait du piratage avec l'animation dans le passé. Cela fonctionne bien dans la plupart des cas. Nous prévoyons d'utiliser une manière React beaucoup plus pure au lieu de la pirater. Cette mise à jour se fera en silence, rien ne vous affectera.

🧩 Optimisation des composants

Nous avons ajouté de nombreux composants dans la version 3.0 et continuerons dans la version 4.0. Ces composants proviendront du scénario d'entreprise, d'Ant Design Pro et des exigences sociales. Le nouveau processus de composants sera le même que Ant Design 3.0, nous mettrons le fichier de conception associé dans PR et le collecterons sur le site officiel. Sortie dans chaque version mineure.

En outre, nous prévoyons de refactoriser certains composants clés pour en faciliter l'utilisation. Comprend mais pas seulement:

Forme

Le formulaire est l'un des composants les plus utilisés. Nous remarquons que les réseaux sociaux ont de nombreux commentaires sur la conception de l'API.
Nous souhaitons simplifier l'API en 4.0:

  • Le formulaire comprendra le magasin de données. Plus besoin d'utiliser Form.create() .
  • Fom.Item inclura la liaison de champ. Plus besoin d'utiliser getFieldDecorator .
  • Form.Item conservera la valeur, mais le validateur sera désactivé lorsque le champ sera supprimé.
const Demo = () => {
  const [form] = Form.useForm();

  const onFinish = () => {
    // Do something...
  };

  useEffect(() => {
    // Something like ajax call
    form.setFieldsValue({
      username: 'light',
    });
  }, []);

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item name="username" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
    </Form>
  );
}

Dans le monde réel, on rencontre beaucoup de communication entre les formulaires (généralement en configuration détaillée). Nous voulons vous faciliter la tâche:

const { useForm, createContext } = Form;
const FormContext = createContext();

const Demo = () => {
  return (
    <FormContext>
      <YourForm1 />
      <YourForm2 />
    </FormContext>
  );
};

Si vous souhaitez suivre la progression du formulaire, vous pouvez le voir ici .

Table

Dans le passé, nous avons reçu beaucoup de commentaires de la table . Nous savons que les accessoires d'extension et de défilement ne fonctionnent pas bien ensemble. Cette fois, nous allons nous concentrer pour y remédier. De plus, nous ferons beaucoup sur l'optimisation de la table. Et un moyen facile de faire la mise en page :

const Demo = () => {
  return (
    <Table
      header={{
        templateAreas: `
          name    address     address
          name    building    no
        `,
        cells: [
          { key: 'name', title: 'Name' },
          { key: 'address', title: 'Address' },
          { key: 'building', title: 'Building' },
          { key: 'no', title: 'No' },
        ],
      }}
    />
  );
};

antd4-table

Nous prévoyons également d'ajouter un pied de

Nouveau DatePicker

Current DatePicker satisfait la plupart des exigences. Mais à partir de la discussion communautaire , nous pouvons creuser davantage. Nous fournirons un cueilleur d'année de repos et un cueilleur de ranger ( discuter ). Et aussi, nous mettrons à jour le style de conception DatePicker pour améliorer l'expérience utilisateur.

🚀 Continuer la mise à jour

Outre le contenu ci-dessus, nous prévoyons également de continuer à mettre à jour. Ceux-ci continueront à être mis à jour dans 4.0 pour améliorer le développement et l'expérience utilisateur.

🧶 Améliorez l'accessibilité

Ant Design 3.0 a une prise en charge limitée de l'accessibilité, nous prévoyons d'ajuster la structure du dom et d'ajouter plus de marque aria pour améliorer l'expérience du lecteur d'écran. En outre, nous nous préparons également à optimiser l'interaction du clavier.

🎯 Norme API développeur

Nous constatons que certains styles de dénomination d'API sont peu différents des autres. Ce n'est pas un problème pour les développeurs Typescript, mais il est difficile de s'en souvenir autrement.
Ainsi, nous allons créer un document standard de dénomination qui inclut les API actuelles et les règles de dénomination associées. Dans la nouvelle fonctionnalité, suivra la règle de dénomination pour éviter les conflits de dénomination d'API. Nous accueillons également les opinions de la communauté à ce sujet dans les relations publiques.

💼 Mode de réaction strict

Si vous avez essayé d'envelopper le composant antd avec <React.StrictMode> , vous recevrez un avertissement. Nous avons déjà remplacé certains composants par une nouvelle méthode de cycle de vie. Ce travail se poursuivra dans la version 4.0.

💡 Améliorez l'expérience des développeurs

Dans le passé, nous avons constaté que certains problèmes venaient à plusieurs reprises. Ces problèmes sont en quelque sorte une question d'utilisation. Nous pensons que nous pouvons faire quelque chose à ce sujet (en fait déjà en 3.0). Dans l'environnement de développement, nous avertirons les statuts inattendus (comme invalider l'objet Moment, l'ajustement du préfixe / affixe provoquera un changement de structure dom, etc.). Nous pensons que la console est le premier endroit sur lequel se concentrer en cas de problème. Fournit des conseils appropriés peut aider à trouver le problème. En même temps, nous résumerons les autres questions dans la FAQ de chaque document composant. Du côté de la maintenance, nous ne pouvons pas aider sur chaque question d'utilisation, mais elles existent, en particulier avec les nouveaux développeurs. La FAQ peut aider à gagner beaucoup de temps de recherche. Si cela vous intéresse, n'hésitez pas à nous aider à améliorer l'expérience des développeurs.

🐱 Ressource de conception

Ant Design n'est pas seulement une bibliothèque de composants. La conception est la puissance du support. Nous synchroniserons la mise à jour de la ressource de conception (package de composants Sketch, outils de cuisine, jeton de conception, etc.). Nous ajusterons également le style actuel des composants pour améliorer l'expérience utilisateur.

Jalons

Voici notre plan de jalons. Nous allons créer un problème connexe sur Github. Nous souhaitons également la bienvenue aux contributeurs sociaux:

Q2

  • Marquer l'API associée comme obsolète et la supprimer du document.
  • Mise à jour d'avertissement des composants de bas niveau.

Q3

  • Créez la branche antd 4.0 et mettez à jour le document.
  • Développement de composants.

T4

  • Libérez Ant Design 4.0.

Bienvenue à bord

Nous vous tiendrons au courant pendant le processus de développement. Le contenu ci-dessus n'est peut-être pas définitif. Les réflexions / conseils de la communauté seront plus que bienvenus! Améliorons Ant Design 4.0!


introduction

Cela fait 16 mois que Ant Design a publié la version 3.0 en décembre 2017. Durant cette période, nous avons corrigé un grand nombre de bugs et ajouté un grand nombre de nouvelles fonctionnalités ( journal de mise à jour ). Soumis 4289 commits, publié 138 versions, fermé 7675 numéros et PR et ajouté 25375 étoiles. Nous avons également publié Ant Design Pro 4.0 . Prend en charge TypeScript, bloque et résume la mise en page. Nous tenons à remercier tous les bénévoles de la communauté pour votre dévouement à rendre Ant Design plus utilisable.

Dans le même temps, nous réfléchissons également à la prochaine étape et à la manière de faire avancer Ant Design.Nous prévoyons de sortir la version Ant Design 4.0 au quatrième trimestre de cette année . 🍻

Ce qui suit est un plan détaillé pour 4.0, bien sûr, cela est toujours en cours de planification. Il peut y avoir des ajustements lors de la sortie officielle.

🌓 Ajustement de compatibilité

Nous supprimerons les attributs marqués comme obsolètes dans la version 4.0. À ce moment-là, vous ne pourrez plus utiliser la méthode abandonnée. Si vous mettez à niveau votre projet vers la dernière version 3.x et que vous ne voyez pas le message d'avertissement d'antd dans la console, votre mise à niveau vers la version 4.0 sera également transparente. Pour la version 3.x, nous continuerons d'effectuer six mois supplémentaires de travaux de maintenance après la version 4.0.

Nous savons que la version de mise à niveau a beaucoup d'énergie pour abandonner l'API obsolète. Nous prévoyons de fournir un package compatible pour aider la transition du projet lors de la publication de la version 4.0 (l'API associée est encore en cours de conception et peut être différente lorsqu'elle sera officiellement publiée):

import Compatible from '@ant-design/compatible';

// It works, but will warning in console
const Demo = () => (
  <Compatible>
    <YourApp />
  </Compatible>
);

Le pack de compatibilité restera également mis à jour jusqu'à l'arrêt des travaux de maintenance 3.0.

Utilisez la dernière version de l'API React

Nous soutenons la version React 15 depuis longtemps, mais d'après les commentaires de la communauté, ce n'est en fait pas important (le numéro de problème de React 15 approche les 0%). Parce que React lui-même a une compatibilité très robuste. Afin de prendre en charge React 15, nous faisons très attention à l'utilisation de nouvelles API pendant le processus de développement. Après la version 4.0, nous utiliserons la dernière version de React comme référence pour le développement:

  • Fournir la version Hooks des composants associés
  • Prise en charge du mode simultané (bien sûr, il y a plus de choses à préparer et continueront d'être ajustées dans la version 4.0.)
  • Embrassez React 17 (wow! ~)

Arrêter le support IE9 / 10

Ant Design 3.0 a fait beaucoup d'efforts pour être compatible avec l'ancienne version d'IE . Cependant, selon les statistiques de l'industrie, la part mondiale et nationale du navigateur IE9 / 10 diminue avec la mise à jour du système Windows. Dans la version 4.0, nous arrêterons de prendre en charge IE 9/10 (mais continuerons de supporter IE 11). Cela signifie également qu'il est possible de prendre en charge les nouvelles fonctionnalités du navigateur.

Autres ajustements de compatibilité

  • Mettre à niveau de Less 2.x vers Less 3.x
  • Changement d'utilisation des icônes
  • Mention obsolète

📦 Réduisez le volume

Optimiser la taille de l'icône

Dans [email protected] , nous avons introduit l'icône svg ( pourquoi utiliser l'icône svg? ). L'API pour définir les icônes avec un nom de chaîne est utilisée. Dans cette conception, nous ne pouvons pas charger à la demande. Par conséquent, nous avons introduit tous les fichiers d'icônes svg, ce qui augmente considérablement la taille du produit emballé. Dans la version 4.0, nous ajusterons cela pour optimiser le volume.

L'ancienne version de l'utilisation de Icon sera obsolète :

import { Icon, Button } from 'antd';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

Dans la version 4.0, une méthode d'introduction à la demande sera adoptée:

// Directly import
import SmileOutline from 'antd/icons/SmileOutline';

// If tree-shaking supported
import { SmileOutline } from 'antd/icons';

const Demo = () => (
  <div>
    <SmileOutline />
    <Button icon={<SmileOutline />} />
  </div>
);

Vous pourrez toujours continuer à utiliser la méthode compatible ci-dessus.

Supprimer Draft.js

Nous avons introduit Draft.js dans le composant Mention pour implémenter la fonction de positionnement des invites déroulantes, mais nous n'avons utilisé qu'une petite partie de sa fonction. Compte tenu de la rentabilité, cela semble un peu inutile. Nous prévoyons d'en supprimer la dépendance dans la version 4.0 et de passer à une solution plus légère. Dans le même temps, afin de distinguer les composants Mention dans la version 3.0, nous fournirons un nouveau composant Mentions pour éviter les conflits d'API. De même, il prend également en charge l'utilisation continue des méthodes compatibles ci-dessus:

// Follow Code will not work
import { Mention } from 'antd';

const Demo = () => (
  <Mention />
);
// Added `Mentions` in 4.0
import { Mentions } from 'antd';

const Demo = () => (
  <Mentions />
);

🧭 Optimisation des performances

Au cours du processus de maintenance, nous avons reçu de nombreuses discussions sur les

Défilement virtuel

Le défilement virtuel est une méthode d'optimisation courante, mais en raison des effets d'animation dans Ant Design, il n'est pas si facile de personnaliser le défilement virtuel. Désormais, nous prévoyons de prendre en charge nativement le défilement virtuel dans les composants avec défilement. Bien entendu, nous ne garantissons pas que tous les composants ont été mis à jour lors de la sortie de la version 4.0 et continueront d'être mis à jour.

Améliorations de l'animation

Dans le passé, nous utilisions des hacks pour traiter les animations. Dans la plupart des scénarios, cela fonctionne assez bien. Dans la version 4.0, nous prévoyons d'ajuster cela et d'abandonner l'approche du hack pour un chemin plus réactif. L'ajustement sera mis à jour en silence et vous n'aurez pas besoin d'y apporter de modifications.

🧩 À propos des composants

Dans la version 3.0, nous avons continué d'ajouter de nombreux composants. En 4.0, nous continuerons. Ces composants seront affinés à partir de nos scénarios commerciaux, d'Ant Design Pro et des besoins de la communauté. Il s'agit d'un processus continu. Le processus d'ajout de nouveaux composants est le même que Ant Design 3.0. Nous allons précipiter les projets de conception des composants associés et les afficher dans le PR et les mettre à jour avec le site officiel. Une fois le développement terminé, ils seront publiés dans la version mineure mensuelle.

En outre, nous nous préparons également à refactoriser certains composants clés pour améliorer la facilité de développement et d'interaction. Il comprend, mais sans s'y limiter:

Composant de formulaire

Le public des composants de formulaire est très large et nous avons également remarqué les plaintes de la communauté concernant la lourdeur de l'API de formulaire. Dans la version 4.0, nous espérons explorer de meilleures formes d'API pour simplifier les coûts de développement:

  • Le formulaire agrégera les champs de données du formulaire par défaut et vous n'avez plus besoin de créer un contexte via Form.create() .
  • Fom.Item agrégera les champs du formulaire par défaut, vous n'avez pas besoin de lier le champ via getFieldDecorator .
  • La valeur de Form.Item sera toujours conservée, mais sa fonction de validation ne prendra effet que lorsque l'élément de formulaire est visible.
const Demo = () => {
  const [form] = Form.useForm();

  const onFinish = () => {
    // Do something...
  };

  useEffect(() => {
    // Something like ajax call
    form.setFieldsValue({
      username: 'light',
    });
  }, []);

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item name="username" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
    </Form>
  );
}

Dans la scène réelle, nous avons rencontré la scène de liaison multi-formes (commune dans la configuration détaillée). Nous savons que ce n'est pas pratique à utiliser, nous allons donc également fournir la fonction de liaison entre les formulaires:

const { useForm, createContext } = Form;
const FormContext = createContext();

const Demo = () => {
  return (
    <FormContext>
      <YourForm1 />
      <YourForm2 />
    </FormContext>
  );
};

Si vous souhaitez suivre la progression du formulaire, n'hésitez pas à vérifier la progression .

Composant de table

Dans la version précédente, nous avons reçu beaucoup de commentaires sur le composant Table . Nous savons que les propriétés d'expansion et de défilement de Table n'ont pas bien fonctionné dans le passé. Cette fois, nous nous concentrerons sur la résolution des conflits dans ce domaine. De plus, nous optimiserons davantage les performances du composant Table. Et explorez quelques méthodes de disposition de table plus simples:

const Demo = () => {
  return (
    <Table
      header={{
        templateAreas: `
          name    address     address
          name    building    no
        `,
        cells: [
          { key: 'name', title: 'Name' },
          { key: 'address', title: 'Address' },
          { key: 'building', title: 'Building' },
          { key: 'no', title: 'No' },
        ],
      }}
    />
  );
};

antd4-table

En outre, nous prévoyons également d'ajouter un pied de

DatePicker refait

Le DatePicker existant a répondu à la plupart des besoins, mais à partir de la discussion communautaire . Nous avons encore l'opportunité d'approfondir, nous allons compléter les sélecteurs d'année restants et les sélecteurs de gamme correspondants ( discussion ). En outre, nous ajusterons le style des sélecteurs de date et d'heure associés pour réduire davantage le coût cognitif des utilisateurs.

🚀 Mise à jour en continu

En plus du contenu ci-dessus, nous prévoyons également de continuer à mettre à jour une partie du contenu. Cela sera suivi dans la version 4.0 afin de mieux améliorer le développement et l'expérience utilisateur.

🧶 Améliorez l'expérience d'accessibilité

Ant Design 3.0 ne prend pas en charge l'expérience d'accessibilité. Pour cette raison, nous prévoyons d'ajuster la structure des composants et d'ajouter plus de balises aria pour améliorer l'expérience de lecture de l'écran. En outre, nous nous préparons également à optimiser les méthodes d'interaction du clavier des composants existants pour garantir une meilleure expérience d'interaction complète avec le clavier.

🎯 Spécifications de l'API du développeur

Au cours de l'évolution, nous avons constaté qu'un petit nombre de styles d'API sembleraient incompatibles avec d'autres composants. Pour les utilisateurs de TypeScript, ce n'est pas un problème, mais pour les autres utilisateurs, cela peut entraîner des problèmes de mémoire.

Nous allons donc rassembler un document de dénomination standard. Le document contiendra une liste des API existantes et des conventions de dénomination appropriées. Lors de l'ajout de nouvelles fonctionnalités, elles seront également nommées conformément à cette spécification. Pour éviter les divergences d'API qui pourraient survenir à l'avenir. Bien sûr, nous invitons également les étudiants de la communauté à donner leur avis sur les relations publiques.

💼 Réagir en mode strict

Si vous essayez d'encapsuler <React.StrictMode> dehors du composant antd, vous obtiendrez beaucoup de messages d'avertissement du composant antd. Nous avons mis à jour les méthodes de cycle de vie de certains composants dans la version 3.0. En 4.0, nous continuerons.

💡 Améliorez l'expérience des développeurs

Dans le processus de maintenance précédent, nous avons constaté que certains problèmes se produisaient dans les deux sens. Ces problèmes sont courants dans certaines spécifications d'utilisation ou scénarios d'application. Pour cela, nous avons décidé d'apporter des améliorations ici (en fait, depuis la version 3.0, nous nous améliorons). Dans l'environnement de développement, nous vous demanderons dans la console certaines situations inattendues (telles que des objets Moment invalides, des changements de structure Dom provoqués par l'ajustement dynamique du préffixe / affixe d'entrée, etc.). Nous sommes convaincus que la console est le premier endroit auquel les développeurs porteront attention lorsqu'ils rencontrent un problème, et fournir des conseils appropriés ici peut aider à localiser rapidement le problème. En même temps, pour certains usages ou scénarios spéciaux. Nous fournirons des FAQ dans la documentation correspondante des composants. Du point de vue de la maintenance des projets, notre énergie est incapable d'apporter des réponses détaillées à la problématique des usages. Mais ces questions sont réelles, en particulier pour les développeurs débutants, une FAQ peut aider à gagner beaucoup de temps de recherche. Si vous êtes intéressé, les bénévoles de la communauté sont également les bienvenus pour aider à améliorer l'expérience des développeurs.

🐱 Gestion des actifs de conception

Ant Design n'est pas seulement un ensemble de bibliothèques de composants, mais aussi un puissant système de conception derrière lui. Dans la version 4.0, nous mettrons à jour les derniers actifs liés à la conception (paquet de composants Sketch, ensemble d'outils de cuisine, jeton de conception, etc.) pour faciliter les concepteurs et les étudiants intéressés par le design comme référence. Les styles de conception de composants existants seront également affinés pour améliorer les effets visuels et l'expérience utilisateur.

Plan de temps

Voici notre calendrier, dans lequel certaines mises à jour de composants sont en cours. Nous créerons des problèmes connexes sur github, et les bénévoles de la communauté sont également invités à participer:

Q2

  • Marquez l'API obsolète requise comme obsolète et effacez-la dans le document.
  • Les composants sous-jacents sont préchauffés.

Q3

  • Créez une branche antd 4.0 et mettez à jour la documentation.
  • Développement de composants de bas niveau.

T4

  • Version 4.0.

Bienvenue à participer

Pendant le processus de développement 4.0, le contenu ci-dessus peut être ajusté. Bienvenue aux étudiants de la communauté pour leur fournir des idées et des suggestions précieuses, laissez-nous rendre Ant Design 4.0 plus pratique et plus facile à utiliser!

4.x ✨ Announcement 🕙 Plan 🗣 Discussion

Commentaire le plus utile

15311

Remplacerons-nous Moment.js dans la version 4?

Tous les 182 commentaires

15311

Remplacerons-nous Moment.js dans la version 4?

Super, j'ai hâte de mettre à jour

Préparation alpha V4

Principalement cible

  • [x] branche v4
  • [x] Package compatible
  • [x] Supprimer le contenu obsolète

    • [x] Mention composant

    • [x] Nouveau composant Mentions # 16532

    • [x] Form.create

    • [x] Icône avec type # 12011

    • [x] Autre avec des accessoires d'avertissement obsolètes

  • [x] Moins v3
  • [x] Performances

    • [x] rc-animate surclassement

    • [x] prise en charge du mode simultané

    • [x] Prise en charge de l'animation de défilement virtuel

    • [x] Parchemin virtuel

    • [x] composant rc

    • [x] Arbre

    • [x] Sélectionnez

    • [x] TreeSelect

    • [x] Formulaire: https://github.com/react-component/form/pull/292

    • [x] Fournit la version Hooks

    • [x] Tableau

    • [] templateAreas

    • [x] Support expand & scroll co-work

  • [x] DatePicker avec un nouveau design

    • [x] YearPicker

    • [x] RangePicker.YearPicker

    • [x] RangePicker.MonthPicker

    • [x] RangePicker.YearMonthPicker

    • [x] RangePicker.WeekPicker

    • [x] TimePicker.RangePicker

Continuer la cible

  • [] Accessibilité
  • [x] norme API
  • [] React.StrictMode

Voici quelques suggestions sur Ant 4

Environ templateAreas

templateArea analyse la chaîne au moment de l'exécution, cela provoquera des erreurs d'analyse non exclues ou des erreurs slient en cas de faute de frappe dans la chaîne. L'analyse du runtime est également hostile à TypeScript. Est-ce que Ant Team considère la proposition ci-dessous:

const columnTemplate = [
  ['name', 'address', 'adress'],
  ['name', 'building', 'no']
]

À propos de la dépendance

Est-ce que Ant Team envisagerait de supprimer la dépendance moment ?

Moment est trop gros pour un projet frontal, il existe de nombreuses alternatives, mais les accessoires de TimePicker et DatePicker relaient sur Moment. Cela nous amène à ne pas remplacer moment par date-fns ou une autre bibliothèque plus petite que Moment.

À propos de l'icône

Je pense que la façon dont les icônes Ant sont utilisées maintenant ne devrait pas être obsolète, la nouvelle façon dont l'icône d'importation peut entraîner un changement de bloc de paquet commun lorsque j'ajoute ou supprime une icône.

Ant Team peut fournir deux façons d'utiliser les icônes Ant:

  1. Empaquetez toutes les icônes dans un seul fichier js, les développeurs peuvent importer un fichier entier en utilisant la balise <script> et définir externals dans le pack Web.
  2. La nouvelle façon d'introduire ci-dessus.

这 是 我 对 Ant4 的 一些 建议

关于templateAreas

templateAreas在 运行 时 对 字符串 进行 解析 , 当 字符串 出现 拼写 错误 的 时候 , 可能 会 导致 解析 失败 或者 静默 错误。 运行 时 解析 对 TypeScript 也不 友好 。Ant 团队 是否 考虑 如下 方案 :

const columnTemplate = [
  ['name', 'address', 'adress'],
  ['name', 'building', 'no']
]

关于 依赖

是否 考虑 移除 对 Moment 的 依赖?

Moment 对于 前端 项目 来 时 实在 是 太大 了 , 市面上 有 许多 可供 替代 的 库 , 但是TimePicker和DatePicker的 参数 依赖 于 Moment 对象 , 这 导致 了 我们 没 办法 使用date-fns或者 一些 比 Moment 更 小 的 库 来 替代 Moment。

关于 图标

我 认为 当前 使用 Ant 图标 的 方式 不 应该 被废弃。 新 的 使用 方式 在 我 新增 或者 删除 一个 图标 引用 的 时候 , 可能 会 导致 公共 morceau 反复 变更。

Fourmi 团队 可以 提供 如下 两种 方案 来 使用 Fourmi 图标 :

  1. 打包 所有 图标 到 一个 js 文件 中 , 开发 者 通过<script>标签 引用 全部 图标 , 并且 在 Webpack 中 设置 为externals
  2. 4.0 新 介绍 的 图标 使用 方式

Un plan pour prendre en charge le défilement virtuel pour la table? La table infinie est préférée dans certains cas plutôt que la pagination.
Et comme «Comment» est inclus dans la version 3.11, peut-être ChatBox et ChatMessage?

Un plan pour prendre en charge le défilement virtuel pour la table? La table infinie est préférée dans certains cas plutôt que la pagination.
Et comme «Comment» est inclus dans la version 3.11, peut-être ChatBox et ChatMessage?

UserInfo peut-être des priorités.

environ templateAreas

Je supporte également la syntaxe des tableaux à deux dimensions
Je supporte également la syntaxe des tableaux à deux dimensions.

Concernant templateAreas, voici un exemple de vérification statique
Ceci est un exemple de vérification statique de type utilisant ts pour templateAreas

interface Cell<T extends string = string> {
  key: T;
  title: string;
}

interface Config<K extends string = string> {
  header: {
    templateAreas: ReadonlyArray<ReadonlyArray<K>>;
    cells: ReadonlyArray<Cell<K>>
  };
}


declare function check<T extends string>(config: Config<T>): void;

const config = {
  header: {
    templateAreas: [
      ['name', 'address', 'address'],
      ['name', 'building', 'error'],
    ],
    cells: [
      { key: "name", title: "Name" },
      { key: "address", title: "Address" },
      { key: "building", title: "Building" },
      { key: "no", title: "No" }
    ]
  }
} as const;

check(config);

Terrain de jeux

image

impressionnant

15311

Remplacerons-nous Moment.js dans la version 4?

Je pense que le principal problème pour s'éloigner de moment est la rupture du changement autour de locale s. https://github.com/ant-design/ant-design/issues/15311#issuecomment -471383811

J'espère que le support pour dactylographié peut être meilleur

Great Seeing 4.0 est en cours! J'ai quelques suggestions ci-dessous à prendre en considération, je ne suis pas tout à fait sûr qu'elles s'inscrivent dans le modèle de conception, mais pour la personnalisation, elles seraient excellentes à mon avis.

  • Être capable de contrôler la couleur d'arrière-plan d'une ligne dans <Table> . Par exemple, colorer une ligne en orange pour mettre en évidence l'avertissement pour cette ligne.
  • Couleurs des boutons, n'a trouvé aucune discussion précédente à ce sujet. Mais ce serait formidable de pouvoir avoir une API similaire à <Tag color="red">RED<Tag /> pour les boutons, par exemple <Button color="red">Red Button<Button/> .
  • Prise en charge des icônes Font-Awesome 5.x dans les différents composants, ou assurez-vous qu'elles fonctionneront avec les autres icônes en cours. J'ai remarqué des problèmes d'alignement lors de l'utilisation de FA au lieu du composant natif <Icon> .
  • Le composant <Pagination> ne prend pas en charge la fourniture directe du nombre de pages, le cas d'utilisation est que je n'ai que le nombre de pages et la page actuelle disponibles par exemple, mais pas le nombre d'éléments dans chaque page. Je n'ai pas encore trouvé de bon moyen de gérer cela.

@orecus

Par exemple, colorer une ligne en orange pour mettre en évidence l'avertissement pour cette ligne

J'ai tendance à utiliser rowClassName pour attacher une classe à cette ligne, puis remplacer le style par défaut avec css.

leLe composant ne prend pas en charge la fourniture directe du nombre de pages

Peut passer un faux total. Par exemple, si vous voulez 50 pages, vous pouvez passer total = pageSize * 50 .

C'est vraiment une bonne nouvelle 🚀 L'accent mis sur les performances est visible et c'est génial, car certains composants ne sont pas utilisables avec de grandes quantités de données.

Comment voulez-vous implémenter le défilement virtuel? En utilisant react-window ?

Existe-t-il des priorités pour les fonctionnalités principalement cibles?
J'aimerais essayer la sélection virtuelle en phase alpha et je pense que je ne suis pas seul à ce sujet.

Merci.

Pourquoi le nom de chaîne ne peut pas se charger à la demande? Lazy () de react ne résout-il pas le problème?

@faradaytrs
Oui, mais cela dépend des caractéristiques de webpack , des opérations spécifiques

Deux problèmes sont plus importants

  • /* webpackChunkName: "icons/icon-" */ écrit par webpack Magic Comments
  • Comme le dit l'original, "Chaque icône contient des informations supplémentaires sur le module Webpack en plus du contenu de l'icône"

Des idées sur la pollution de style global? # 4331 # 9363

Des idées sur la pollution de style global? # 4331 # 9363

À mon humble avis, ce serait formidable que la version 4.0 permette aux utilisateurs de définir des styles antdesign sous un nom global (voir mon commentaire https://github.com/ant-design/ant-design/issues/4331#issuecomment-396047487)

Ravi d'entendre parler de la prochaine étape!

Mon 2 Ct. concernant les documents et la rationalisation:

Il y a souvent des props transmis aux éléments DOM sous-jacents, qui ne sont pas documentés (IIRC Dans certains cas, tous les props qui ne sont pas sélectionnés par l'implémentation du composant le sont). Il serait très utile de les avoir documentés, regroupés par élément cible (il peut y en avoir plusieurs): "Les accessoires suivants sont transmis au conteneur

"ou" Les accessoires suivants sont passés à travers le element ... "ou" Tous les autres accessoires sont passés à ... ". Pour ces accessoires, aucune explication détaillée n'est nécessaire, des liens vers MDN pourraient être suffisants.

Un tel changement serait également formidable pour nous, les développeurs TypeScript, actuellement c'est un travail fastidieux pour maintenir la définition TS à jour à cet égard.

Dans le "Developer API standard", cela devrait être documenté, et il devrait y avoir une décision concernant les accessoires à toujours passer (className, id,?)

Une autre question:

Envisagez-vous de passer plus de fichiers (ou même de composants rc) de JavaScript avec des définitions TypeScript à TypeScript natif?

Pensez à remplacer rc-form par quelque chose de plus flexible, comme Formik.

Question pour les responsables:

Mon équipe est intéressée à essayer Ant, mais https://github.com/ant-design/ant-design/issues/11097 (Antd Less crée des fuites JavaScript globales) nous bloque. La feuille de route ci-dessus indique qu'Ant passera à la version LESS 3, et j'ai lu que la fonctionnalité JavaScript en ligne non sécurisée et obsolète en question est désactivée par défaut. Cela signifie-t-il que la version 4 d'Ant n'aura plus le problème LESS?

Non seulement IE9 / 10, mais arrêtez le support IE,

Oh mon Dieu, il serait si utile de ne pas polluer les styles globaux ( html , body , *::before , ...)

Le carrousel basé sur react-slick a de nombreux problèmes lors de son utilisation. Il est recommandé de remplacer la nouvelle version par une autre bibliothèque
react-pannable est assez bon à utiliser

La description des commits de @cztflove cette bibliothèque est tout no message 😃, et l'attention de la communauté est trop faible, je ne devrais pas la considérer.

@ yoyo837 Le composant principal de virtual list et 仿ios边缘弹性 , sur la base de ce composant, certaines fonctions 拖拽 peuvent être réalisées 🤔 Il y a plus de place pour l'expansion à l'avenir

Ne devrions-nous pas migrer vers une langue universelle?

Je suis entièrement d'accord et respecte les langues régionales, même si je ne suis pas anglophone. Il y a des centaines de tâches répétitives, ou mieux dire en double avec un double langage, le facteur le plus important est le temps, la traduction des chaînes discutées, l'apprentissage de la documentation ou des tuts. démos etc.

Je dois admettre que les contributeurs ne manquent pas à cause des conflits linguistiques, des centaines d'entre nous ont encore peur de s'impliquer. Il y a déjà de nombreux sprints, des problèmes de traduction en cours, mais ce que je demande, c'est de migrer complètement vers une langue universelle avec cette version majeure pour réduire le fossé de communication entre nous tous.

Ne devrions-nous pas migrer vers une langue universelle?

Je suis entièrement d'accord et respecte les langues régionales, même si je ne suis pas anglophone. Il y a des centaines de tâches répétitives, ou mieux dire en double avec un double langage, le facteur le plus important est le temps, la traduction des chaînes discutées, l'apprentissage de la documentation ou des tuts. démos etc.

Je dois admettre que les contributeurs ne manquent pas à cause des conflits linguistiques, des centaines d'entre nous ont encore peur de s'impliquer. Il y a déjà de nombreux sprints, des problèmes de traduction en cours, mais ce que je demande, c'est de migrer complètement vers une langue universelle avec cette version majeure pour _réduire le fossé de communication_ entre nous tous.

说得 对 , ↔ 中文 吧

Question pour les responsables: est-il prévu d'utiliser des variables CSS pour changer la couleur et les thèmes de style en vol?

J'ai appris en pratique que changer les styles de composants via des variables est une manière très confortable. J'ai essayé de réécrire Less variables avec var(--css-vars) , mais j'ai attrapé beaucoup d'erreurs sur les compilations de style, car beaucoup de styles utilisent des fonctions et des opérations avec des vars, pas seulement des valeurs. Je suppose que c'est une grande tâche et que cela crée des changements de rupture, mais des versions majeures ont été créées pour des changements de rupture :) Et l'utilisation des variables CSS peut donner de nombreuses possibilités de personnalisation des styles de composants.

Qu'est-ce que vous en pensez? J'ai de toute façon prévu de développer un thème avec l'utilisation des variables CSS comme pull request, car cette fonctionnalité (changement de thème en vol) est nécessaire dans mon projet.

Désolé, si cette suggestion est en double, mais je n'ai rien trouvé à ce sujet dans d'autres numéros et PR.

@ Z3SA https://caniuse.com/#search = CSS% 20Variables. Cela doit arrêter tout support IE, arrêter le support IE11 est trop radical, même si je soutiens également le faire.

@ yoyo837 , je suis d'accord que c'est une cause trop radicale des problèmes de support d'IE. Mais Ant Design a également le support officiel (comme indiqué sur ant.design) d'Electron (en tant que plate-forme séparée, pas Web). Dans ce cas, il pourrait y avoir moyen de créer deux thèmes: l'un avec Less vars, l'autre avec CSS vars. Mais cela semble trop difficile à supporter.

Donc, autre stratégie possible que je suppose - créer Less vars pour tous les attributs personnalisables dans Less, ou supprimer l'utilisation de toutes les fonctions et opérations sous Less vars que tout développeur peut utiliser comme entrée pour ses variables CSS. Ou si vous le dites plus simplement, utilisez Less vars uniquement comme conteneur de valeur, pas pour les fonctions et les opérations.

Si vous ne supportez que les principaux navigateurs, je pense que la taille du code sera plus petite et que le code sera plus facile à maintenir.

Non seulement IE9 / 10, mais arrêtez le support IE,

@wanliyunyan Trop de rupture. Certains développeurs peuvent rester sur antd @ 3 et ce n'est pas une bonne chose pour nous.

@ Z3SA Ce sera un travail énorme.

@dancerphil Heureusement, je considère uniquement la dernière version de chrome pour mon projet. 😃 J'espère donc que plus la taille est petite, mieux c'est.

@ yoyo837 Je le sais. Et je le ferai moi-même si cette idée ne pouvait pas attirer suffisamment l'attention.

Nous sommes une entreprise qui aimerait migrer progressivement vers antd en utilisant des composants individuels; Cependant, l'utilisation par fourmi des styles Global complique vraiment ce problème. Veuillez arrêter de polluer les styles mondiaux.

Le formulaire est l'un des composants les plus utilisés. Nous remarquons que les réseaux sociaux ont de nombreux commentaires sur la conception de l'API. Nous souhaitons simplifier l'API en 4.0:

Fom.Item inclura la liaison de champ.

Ces changements nous permettront-ils toujours d'utiliser Form.Item comme un composant strictement de présentation? J'adore les composants d'antd, mais je préfère la forme de réaction finale pour la gestion de l'état. Je veux le style de Form.Item, et aucune logique de gestion d'état.

la branche 4.0 est créée. Quand puis-je prévisualiser

le nouveau composant de formulaire est génial!

Veuillez remplacer momentjs par dayjs car momentjs est énorme et la taille du bundle est également devenue énorme.

Y a-t-il des pièges à envisager de reprendre l'éditeur de texte enrichi?

Quelle est la date de sortie?

@rafaelodassi Il n'y a pas encore de date confirmée, mais probablement au quatrième trimestre.

La mise à niveau vers @babel/[email protected] et [email protected] serait également notre priorité.

Pas la v3? Y a-t-il des nouvelles pour [email protected] ?

Tout le monde parle de supprimer complètement le support IE parce que les statistiques montrent qu'il est à peine utilisé. Qu'en est-il des millions d'utilisateurs d'entreprise derrière l'intranet qui ne sont pas du tout dans les statistiques? Ils sont bloqués avec IE10 et IE11 en raison des politiques d'entreprise.

Je m'en tiendrai à

Je suggérerais d'introduire une API pour permettre l'utilisation d'objets en tant que valeurs <Select/> .
pour plus de détails, veuillez consulter https://github.com/ant-design/ant-design/issues/13485

cc @zombieJ

Il est recommandé que chaque composant dispose de son propre journal de mise à jour. Peu importe que vous le gardiez caché. Suggestion personnelle ~

Quand Release ou RC est-il possible?

Il est recommandé que chaque composant dispose de son propre journal de mise à jour. Peu importe que vous le gardiez caché. Suggestion personnelle ~

D'accord, si la documentation de chaque composant peut être ajoutée par quelle version. Sinon, vous pouvez consulter la documentation et voir si la version actuelle peut être utilisée et s'il faut mettre à jour les dépendances.

Envoyé avec GitHawk

@ fwh1990 @ jas0ncn @redclown
sur les pls anglais)

Gardez-le comme une chaîne anglaise, merci ~

4.0 alpha a été publié. C'est incroyable. Allez mon frère.

Je vais refactoriser mon projet une fois que vous publiez la version

Le thème par défaut de antd est beau, mais il peut aussi être meilleur.
Pour plus de lisibilité, pensez à un contraste amélioré et utilisez un texte plus grand.

Il y a tellement d'articles et d'outils.
https://www.google.com/search?q=web+readability

Il est préférable de fournir un script pour migrer antd v3 vers v4.

Dans le projet biz, il existe trop de composant de formulaire. La migration de antd v3 vers la v4 coûtera trop de fois.

L'équipe react-relay a fait quelque chose de similaire.
Si vous souhaitez migrer react-relay v3 vers react-relay v4 Realease , vous devez modifier de nombreux fichiers.
Pour cela, ils utilisent jscodeshift pour écrire un script de migration, de sorte que l'utilisateur de react-relay puisse facilement migrer react-relay v3 vers la v4.

Je pense qu'il est difficile de surcharger certains styles. Alors, s'il y a un plan pour améliorer cela?

Personnellement, je préfère utiliser CSS-in-JS, il est très flexible et s'intègre incroyablement bien avec React.

Lors de l'utilisation du composant de classe sous 4.0 alpha, l'entité de formulaire ne peut pas être obtenue, https://5d403395cd145c0008eea971--ant-design.netlify.com/components/form/v3-cn L'exemple de code sous ce lien ne peut pas être implémenté, et il n'y a pas d'entité dans formRef méthode

Résolu en

@ Kwei9 , pouvez-vous ouvrir un numéro et le joindre pour le reproduire?Laisse-moi regarder

@ Kwei9 , pouvez-vous ouvrir un numéro et le joindre pour le reproduire?Laisse-moi regarder

L'écriture de référence est modifiée pour cette solution

Je pense que le moment est venu de s'attaquer à la pollution de style mondial! Cela rend très nécessaire d'utiliser antd avec d'autres applications!

Moment est trop gros pour un projet frontal, il existe de nombreuses alternatives, mais les accessoires de TimePicker et de DatePicker relaient Moment. Cela nous conduit ne peut pas remplacer le moment ...

@ jas0ncn Bonjour, veuillez envisager de remplacer momentjs par dayjs (une alternative de 2 ko). Il s'agit déjà d'un numéro testé de Replace Moment.js dans Ant Design (Antd) avec Day.js https://github.com/iamkun/dayjs/issues/529 et cela fonctionne très bien.

En tant que principal responsable de la maintenance de dayjs, nous sommes prêts à offrir toute aide pour ce remplacement.

Merci.

请 考虑 使用 轻 量 的 Dayjs 来 替换 moment.js , 在 这里 已经 充分 测试 过 替换 的 可行性https://github.com/iamkun/dayjs/issues/529 。

L'ancienne méthode d'utilisation de l'icône sera * obsolète *:

import { Icon, Button } from 'antd';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

Utilisera plutôt une icône d'importation unique dans la version 4.0:

// Directly import
import SmileOutline from 'antd/icons/SmileOutline';

// If tree-shaking supported
import { SmileOutline } from 'antd/icons';

const Demo = () => (
  <div>
    <SmileOutline />
    <Button icon={<SmileOutline />} />
  </div>
);

J'ai une idée de la nouvelle référence d'icône. En raison du nouveau libellé ci-dessus, chaque icône équivaut à un composant distinct. Par exemple, l'introduction d'une icône de chargement peut ressembler à ceci:

import Loading from 'antd/icons/Loading';

<Loading />

Mais généralement, vous pouvez encapsuler vous-même un composant de chargement réel. Dans le passé, <Icon /> savaient que c'était une icône en un coup d'œil. Maintenant, il prend trop de noms et vous devez trouver le lieu d'importation si vous voulez savoir si c'est l'icône.
tel que:

<Title />
<Loading />
<Sun />  

À première vue, il semble que les deux suivants ne puissent pas être considérés comme des icônes (bien sûr, cela n'a aucun effet sur l'exécution du code ~)
Si vous modifiez le libellé suivant:

 import {Icon} from 'antd';
 import {Loading, Sun} from '@antd/icons';  

<Icon spec={Loading}  {...otherProps}/>
<Icon spec={Sun} />

Grâce à la couche externe de pain, il ressemble beaucoup à la précédente, et il peut également être utilisé à la demande. Il ne s'agit que d'introduire un composant Icon.
Et si certaines conventions sont respectées, l'icône définie par l'utilisateur peut être transmise via l'attribut spec? Cela équivaut à antd qui aide à définir un grand nombre d'icônes à l'avance, mais celles définies par l'utilisateur sont exactement les mêmes ~~~

ps: Ou est-ce que ce genre d'écriture a en fait été pensé il y a longtemps ou n'y a pas pensé parce qu'il y a un problème avec ce genre d'écriture? . . 😂
J'y ai juste pensé. . .

@ppbl est similaire à ce qui suit selon votre idée:

import Icon from '@antd/icons'; 
imoort { LoadingOutline } from '@antd/icons-svg';

<Icon component={LoadingOutline}  {...otherProps}/>

La nouvelle icône est également générée de la même manière, voir https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-react/src/icons/AccountBook.tsx

Pouvons-nous éviter cette situation en ajoutant le préfixe / suffixe Icon au nom de Icon?

imoort { LoadingOutlineIcon } from '@antd/icons';

<LoadingOutlineIcon  {...otherProps}/>

Veuillez travailler sur la réduction de la taille du paquet
https://github.com/ant-design/ant-design/issues/9419
Lors de l'importation de Button ajoute 95 Ko au projet - c'est tout simplement inacceptable en 2019. 👎

@vagusX Peut-être que je pense que le nom est un peu long? Je pense toujours que le nom est concis et ressemble à un petit composant ou à un composant relativement simple. Si le nom est trop long, il devrait être un gros composant (bien sûr, c'est une mauvaise impression ~ je sais). . ~

Bien sûr, si je sais que c'est une icône juste pour voir <Icon /> , je peux aussi créer moi-même <Icon /> composant

@ avalanche1, vous pouvez consulter le résultat de l'analyse du bundle de ce pr https://github.com/ant-design/ant-design/pull/18217#issuecomment -520683838, et la taille du composant Button décline clairement

Bon à savoir. Mais sur vos captures d'écran, il n'y a aucune indication de la taille réelle, donc je ne peux ni confirmer ni infirmer.

Je vais migrer Form vers de nouvelles API, mais j'ai trouvé que la version de field-form est instable, donc je veux savoir si des changements de rupture avec ces interfaces seraient désormais possibles à l'avenir.

@orzyyyy ,
antd publie la version 4.0-alpha.x pour que les bénévoles sociaux et internes puissent la tester. Si aucun commentaire négatif de la version alpha, cette API sera la dernière à la sortie.

@ avalanche1 @ant-design/icons la version v4-alpha prend en charge le tremblement des arbres, de sorte que la taille du bundle dépend de la quantité d'icônes que vous avez utilisées dans votre propre projet, que vous utilisiez le composant antd qui importe des icônes en interne ou que vous utilisiez @ant-design/icons directement, alors peut-être que je ne pourrais pas comprendre votre inquiétude sur ce point.

Pourquoi parlons-nous d'icônes alors que mon message initial portait sur Button, Calendar et d'autres composants? https://github.com/ant-design/ant-design/issues/9419

La valeur DatePicker doit être moment, peut-être supprimer moment? Si je mets à jour le from, je dois convertir en moment

Pour le moment , voici ma considération. DatePicker utilise toujours moment par défaut depuis l'exigence de compatibilité, mais il fournit la fonction de fabrique à créer avec une autre bibliothèque de date:

import DatePicker, { createPicker } from 'antd/lib/date-picker';

import dayjs from 'dayjs';

const basicDemo = <DatePicker />

const MyDatePicker = createPicker(dayjs, {
  // Some proxy function, maybe can provided by default...
  format(dayObj, formatStr) {
    return ...;
  },
  parse(str, formatStr) {
    return ...;
  },
});

const dayDemo = <MyDatePicker />;

Juste réflexion, bienvenue discussion.

Il est maintenant temps de se débarrasser de moment.js !

  1. Moment.js ne sera arbre en raison de son API OOP complexe . (Ils auraient besoin de le réécrire à partir de zéro). C'est une surcharge énorme pour antd et les utilisateurs.

  2. Ant Design v4 est une version majeure avec déjà des changements de rupture. Le moment est venu!

  3. Je suggère de ne pas le remplacer par une autre bibliothèque. Antd peut utiliser quelque chose de petit comme dayjs ou date-fns interne, mais il devrait accepter des objets ou des chaînes natives Date pour ses composants.

Chaque fois que vous appelez moment() , un chiot meurt .

:chien:

@zombieJ aimerait savoir comment progresse le composant Table. Existe-t-il une version

La version alpha inclut-elle déjà la nouvelle table? Si tel est le cas, le site Web de prévisualisation devrait en contenir un exemple?

La table est dans la file d'attente, actuellement je travaille sur la liste virtuelle.

Qu'en est-il du support des composants stylisés?

Formulaire initialValues ​​ne définit pas moment . https://github.com/react-component/field-form/blob/master/src/interface.ts#L7

J'espère que Form peut fournir une version incontrôlée pour résoudre le problème de performance des grands formulaires comme Excel

Y a-t-il une chance que la documentation alpha soit déplacée vers le site de documentation Ant habituel?

Mon employeur bloque les domaines Netlify et je suppose que d'autres pourraient aussi le faire.

Un plan concret pour prendre en charge le fonctionnement du clavier sur le menu et la liste déroulante?

Y a-t-il une chance que la documentation alpha soit déplacée vers le site de documentation Ant habituel?

Mon employeur bloque les domaines Netlify et je suppose que d'autres pourraient aussi le faire.

Pourquoi? lol

On espère que le composant Table ressemblera au composant Table de l'élément. Chaque colonne définira automatiquement une largeur en premier. Il est suggéré que le caractère d'en-tête du tableau soit remplacé par min-width au lieu de changement de ligne. On espère que le pliage et les fonctions de défilement peuvent être utilisées simultanément. On espère que la table en forme d'arbre ressemblera à TreeSelect lorsque plusieurs choix sont faits.

J'espère que le composant Table peut être comme le composant Table de Element. Chaque colonne définira automatiquement une largeur en premier. Il est recommandé de changer le caractère de la tête du tableau en min-width sans wrapping. J'espère que la fonction de pliage et la fonction de défilement pourront être utilisées en même temps. J'espère que la table arborescente sera utilisée lors de sélections multiples , Peut être similaire à TreeSelect

Y a-t-il une chance qu'avec la v4 ou peut-être la v5, vous fassiez quelque chose à propos de la personnalisation? MaterialUI est beaucoup plus facile à personnaliser, ce qui en fait toujours un choix pour le projet sur lequel je travaille, même si j'aimerais vraiment utiliser AntD car il est beaucoup plus complet, etc.
Veuillez déposer moins pour quelque chose de mieux pour la personnalisation.

Après avoir laissé une agence tester notre application Web antd, ils ont identifié de graves problèmes d'accessibilité et nous avons obtenu la pire note possible. Lors de l'examen des principales raisons, cela se résume aux composants rc suivants:

  • rc-select (nous avons dû remplacer par Downshift et appliquer des styles antd sur le dessus)
  • rc-tabs (voir # 18798)
  • et peut-être d'autres que nous n'utilisons pas jusqu'à présent

Quelle est l'ampleur de la gouvernance d'antd sur les composants rc et l'équipe serait-elle en mesure de résoudre ce problème en temps opportun pour la version 4.0? L'accessibilité sera toujours relativement peu prioritaire, mais la vérité est qu'il est de plus en plus difficile de l'ignorer car les entreprises sont légalement tenues de fournir des applications accessibles aux employés / clients.

Vous pouvez compter sur moi pour des tests approfondis avec des lecteurs d'écran et des comparaisons avec les meilleures pratiques.

MaterialUI est beaucoup plus facile à personnaliser

@murbanowicz pourriez-vous élaborer? Je suis curieux de savoir pourquoi vous pensez cela.

@abenhamdine Pas de problème!
Dans MUI, il y a un ThemeProvider lequel vous enveloppez votre application et vous configurez tout le thème juste par l'objet JS qui est tapé dans TypeScript, donc c'est tellement agréable de travailler avec.

Dans AntD pour personnaliser, vous devez jouer avec LESS ou SASS (avec certains plugins), vous devez donc gérer d'autres deps, etc., vous devez passer par la source des composants pour trouver la variable que vous souhaitez modifier pour un composant spécifique, etc.
De plus, il n'y a pas de bon moyen de changer le thème à l'exécution, ce qui est si facile avec MUI, simplement en changeant d'objet JS qui peut être facilement extrait du serveur, etc.

Fondamentalement, lorsque vous recherchez la personnalisation d'AntD et de MUI, vous trouvez des exemples faciles sur MUI car il n'y a rien à dire car c'est simple, mais lorsque vous recherchez la personnalisation AntD sur Google, vous trouvez beaucoup de solutions hacky, etc.

J'adore AntD pour ses complets et tant de bons composants, mais la personnalisation est vraiment mauvaise et basée sur mon expérience et mes discussions avec d'autres développeurs, cela devrait être l'un des points clés de la feuille de route

@abenhamdine Pas de problème!
Dans MUI, il y a un ThemeProvider lequel vous enveloppez votre application et vous configurez tout le thème juste par l'objet JS qui est tapé dans TypeScript, donc c'est tellement agréable de travailler avec.

Dans AntD pour personnaliser, vous devez jouer avec LESS ou SASS (avec certains plugins), vous devez donc gérer d'autres deps, etc., vous devez passer par la source des composants pour trouver la variable que vous souhaitez modifier pour un composant spécifique, etc.
De plus, il n'y a pas de bon moyen de changer le thème à l'exécution, ce qui est si facile avec MUI, simplement en changeant d'objet JS qui peut être facilement extrait du serveur, etc.

Fondamentalement, lorsque vous recherchez la personnalisation d'AntD et de MUI, vous trouvez des exemples faciles sur MUI car il n'y a rien à dire car c'est simple, mais lorsque vous recherchez la personnalisation AntD sur Google, vous trouvez beaucoup de solutions hacky, etc.

J'adore AntD pour ses complets et tant de bons composants, mais la personnalisation est vraiment mauvaise et basée sur mon expérience et mes discussions avec d'autres développeurs, cela devrait être l'un des points clés de la feuille de route

explication claire et précise, merci!

@abenhamdine Pas de problème!
Dans MUI, il y a un ThemeProvider lequel vous enveloppez votre application et vous configurez tout le thème juste par l'objet JS qui est tapé dans TypeScript, donc c'est tellement agréable de travailler avec.

Dans AntD pour personnaliser, vous devez jouer avec LESS ou SASS (avec certains plugins), vous devez donc gérer d'autres deps, etc., vous devez passer par la source des composants pour trouver la variable que vous souhaitez modifier pour un composant spécifique, etc.
De plus, il n'y a pas de bon moyen de changer le thème à l'exécution, ce qui est si facile avec MUI, simplement en changeant d'objet JS qui peut être facilement extrait du serveur, etc.

Fondamentalement, lorsque vous recherchez la personnalisation d'AntD et de MUI, vous trouvez des exemples faciles sur MUI car il n'y a rien à dire car c'est simple, mais lorsque vous recherchez la personnalisation AntD sur Google, vous trouvez beaucoup de solutions hacky, etc.

J'adore AntD pour ses complets et tant de bons composants, mais la personnalisation est vraiment mauvaise et basée sur mon expérience et mes discussions avec d'autres développeurs, cela devrait être l'un des points clés de la feuille de route

Je suis d'accord avec @murbanowicz que la personnalisation avec Antd peut devenir un peu compliquée (fuite de style global, manière piratée d'utiliser Sass, conflits de priorité entre les remplacements de style, beaucoup de dépendances externes telles que moment conduisant à une taille de paquet énorme ), mais ayant utilisé MUI pendant longtemps, je trouve Antd beaucoup plus personnalisable.

Je ne suis pas au courant des nouvelles versions de MUI, mais la dernière fois que j'ai vérifié, il y avait une partie des composants que vous ne pouviez pas personnaliser, car MUI utilise styled-components , si les développeurs n'ont pas ajouté classNames partout, vous ne pouvez pas simplement sélectionner le nom de classe exact du composant et le remplacer par votre propre style.
Le thème est cool pour une utilisation directe d'une bibliothèque, mais si vous voulez adapter le style à votre système de conception, c'est très compliqué avec MUI, parfois même impossible;)

Mais quand même, antd effectivement besoin d'un peu de travail pour rendre l'expérience de personnalisation plus facile;)

@filipjnc ,
rc-select publié une version alpha qui améliore l'accessibilité. Vous pouvez aider à tester là-dessus. Et la branche de préparation v4 l'a utilisée, vous pouvez voir un aperçu en haut.
Pour rc-tabs , puisque ce n'est pas la priorité absolue, je vais l'améliorer aussi mais plus tard.

@zombieJ d' accord, je vais jeter un oeil à rc-select alpha.

Même si rc-tabs n'est pas une priorité, pouvez-vous jeter un œil à ma pull request, où je corrige les points les plus critiques de nos résultats de test d'accessibilité?

J'ai un problème ici. Selon la méthode actuelle de réforme des icônes, s'il existe une forme et une icône de composant antd
Un seul alias peut être donné lorsque le formulaire est introduit en même temps

Je souhaiterais vivement que le problème du re-rendu

Veuillez noter que sur https://next.ant.design, les composants ne sont pas triés par ordre alphabétique dans la barre latérale des composants
Schermata 2019-09-30 alle 18 01 03

Comme vous le savez peut-être, la conception des fourmis ne se porte pas vraiment bien en termes d'accessibilité. Ce n'est pas trop visible en surface pour la majorité des gens, mais c'est un gros problème lorsque vous plongez plus profondément. Voyez comment ant-design obtient de très mauvais résultats ici: https://darekkay.com/blog/accessible-ui-frameworks/

La bonne nouvelle est que, puisque j'aime beaucoup le design de fourmis et que je compte continuer à l'utiliser pour des projets d'entreprise, mon objectif est de l'amener en tête de liste.

Je laisse une agence tester une de mes applications d'entreprise pour un client en Allemagne (où l'accessibilité est un sujet important dans les grandes entreprises). Les choses les plus critiques étaient:

  1. Accessibilité du lecteur d'écran pour les composants de base mais cruciaux tels que Select, Autocomplete et Tabs
  2. Contrastes de couleurs dans de nombreux endroits
  3. Navigation au clavier à certains endroits

J'ai d'abord choisi rc-tabs comme solution rapide pour résoudre tous ses problèmes d'accessibilité - il devrait bientôt sortir (https://github.com/react-component/tabs/pull/218). Mais ce qui m'inquiète le plus, c'est rc-select , en particulier la partie combobox (autocomplete). Les combobox sont l'un des aspects les plus délicats de l'accessibilité des lecteurs d'écran et il est facile de se tromper. Pour résoudre tous les problèmes, il faut non seulement quelques ajustements aux propriétés de l'aria, mais plutôt une grande refonte.

Pour résoudre ce problème rapidement dans mon application avant la mise en service, j'ai remplacé la sélection et la saisie semi-automatique de ant-design ( rc-select ) par mes propres composants basés sur https://github.com/downshift-js/downshift. Je viens de reproduire les meilleures pratiques ARIA et d'appliquer les styles antd par-dessus - c'est presque exactement la même chose et c'est parfaitement accessible.

La question provocante est donc: envisageriez-vous de ne pas faire le double travail et de déprécier rc-select en faveur de la bibliothèque downshift plus populaire et complète? Vous pourriez gagner du temps dans l'équipe et vous concentrer sur le perfectionnement des autres composants de base, qui n'ont pas de bonnes alternatives sur le marché open-source.

Cette idée me semble fantastique @filipjnc . De plus, rétrograder fait 1/4 de la taille de rc-select. J'espère que l'équipe antd pourra le faire.

J'aimerais voir plus d'améliorations des couleurs dans la version 4.0. Plus précisément, les documents mentionnent une «palette de couleurs de visualisation des données (à venir)» qui serait très utile dans les tableaux de bord et autres applications lourdes de données. Des gris chauds et froids aideraient également à créer des palettes de couleurs plus cohérentes. De plus, c'est une bonne occasion de corriger le contraste des couleurs pour l'accessibilité (comme mentionné par @filipjnc). Continuez votre bon travail 👍

Comme vous le savez peut-être, la conception des fourmis ne se porte pas vraiment bien en termes d'accessibilité. Ce n'est pas trop visible en surface pour la majorité des gens, mais c'est un gros problème lorsque vous plongez plus profondément. Voyez comment ant-design obtient de très mauvais résultats ici: https://darekkay.com/blog/accessible-ui-frameworks/

La bonne nouvelle est que, puisque j'aime beaucoup le design de fourmis et que je compte continuer à l'utiliser pour des projets d'entreprise, mon objectif est de l'amener en tête de liste.

Je laisse une agence tester une de mes applications d'entreprise pour un client en Allemagne (où l'accessibilité est un sujet important dans les grandes entreprises). Les choses les plus critiques étaient:

1. Screen reader accessibility for basic but crucial components like Select, Autocomplete and Tabs

2. Color contrasts in many places

3. Keyboard navigation in some places

J'ai d'abord choisi rc-tabs comme solution rapide pour résoudre tous ses problèmes d'accessibilité - il devrait bientôt sortir ( react-component / tabs # 218 ). Mais ce qui m'inquiète le plus, c'est rc-select , en particulier la partie combobox (autocomplete). Les combobox sont l'un des aspects les plus délicats de l'accessibilité des lecteurs d'écran et il est facile de se tromper. Pour résoudre tous les problèmes, il faut non seulement quelques ajustements aux propriétés de l'aria, mais plutôt une grande refonte.

Pour résoudre ce problème rapidement dans mon application avant la mise en service, j'ai remplacé Select and AutoComplete ( rc-select ) par ant-design par mes propres composants basés sur https://github.com/downshift-js/downshift. Je viens de reproduire les meilleures pratiques ARIA et d'appliquer les styles antd par-dessus - c'est presque exactement la même chose et c'est parfaitement accessible.

La question provocante est donc: envisageriez-vous de ne pas faire le double travail et de déprécier rc-select en faveur de la bibliothèque downshift plus populaire et complète? Vous pourriez gagner du temps dans l'équipe et vous concentrer sur le perfectionnement des autres composants de base, qui n'ont pas de bonnes alternatives sur le marché open-source.

Je ne serais pas aussi enthousiasmé par la rétrogradation, voir https://github.com/downshift-js/downshift/issues/730
L'accessibilité est importante pour certains utilisateurs, mais les performances sont importantes pour encore plus d'utilisateurs.

La table est dans la file d'attente, actuellement je travaille sur la liste virtuelle.

salut, @zombieJ
Y a-t-il des progrès dans le pied de page de résumé?

@ alexchen1875 ,
En attente d'une nouvelle mise à jour du code du cycle de vie. Le tableau est le suivant après avoir terminé :)

4.0 Certains paramètres d'accessoires peuvent-ils être modifiés en cas de chameau? Par exemple, Input.TextArea in autosize remplacé par autoSize ?
Les accessoires des balises HTML natives dans React sont tous des cas camel, comme <input autoComplete /> , ce autosize semble toujours discordant. . .

Il peut être modifié dans 3.x, compatible avec et supprimer l'utilisation d'origine. @ jinliming2 Êtes- vous intéressé par un PR?

  • 4.0 Pourquoi marquer les props.children de Tree comme une api obsolète et recommander la méthode pure data de treeData à la place. Je pense que props.children est très utile et hautement jouable
  • ComponentWillReceiveProps a été marqué comme obsolète dans la dernière API de react. À l'heure actuelle, il s'avère que le composant table et le composant Animate existent toujours pendant la période d'essai.

+1 pour l'accessibilité. S'il vous plaît!

En parlant du problème de la taille de l'icône claire, il semble que l'icône des autres composants est de 12 pixels et que le sélecteur de date est de 14 pixels. Y a-t-il une prise en compte de la différence entre la taille des icônes claires et des suffixes d'autres composants ou est-ce 14 pixels parce que le sélecteur de date est le commutateur d'icône?Avez-vous des plans pour unifier la taille

@zombieJ prévoit d'ajouter une fonction de tri multi-colonnes de table

pls écrire en anglais

Le problème d'une taille de moment trop importante sera-t-il résolu?

Le problème d'une taille de moment trop importante sera-t-il résolu?

Essayez d'abord d'utiliser dayjs

Peut-il être en anglais? Compte tenu des sentiments des étrangers, je traduis toujours sur Google. Il n'est pas important que la norme de grammaire ne soit pas standard, les mots peuvent être compris par eux

@ afc163
Avez-vous pensé que les étrangers suivent ce repo? Malheureusement, Google Translate n'est pas un bon outil pour comprendre ce que vous dites. Je me rends compte que la plupart des développeurs et utilisateurs d'Ant-Design sont chinois, mais considérez-vous également des non-chinois?
Par conséquent, je vous exhorte à utiliser le langage international pour nous respecter tous.

Salut,
Je voulais essayer Ant Design 4.0 avec create-react-app et Typescript.
J'ai suivi les instructions sur https://next.ant.design/docs/react/introduce mais je ne parviens pas à obtenir une application fonctionnelle.
Les instructions de base suivies ( import Button from 'antd/es/button'; ) pour create-react-app provoquent une erreur:

Impossible de trouver le module antd / es / bouton

Après avoir ajouté react-app-rewired, personnaliser-cra, babel-plugin-import et changer l'importation en import {Button} from 'antd' j'obtiens un message d'erreur:

Impossible de trouver un fichier de déclaration pour le module 'antd'

Pouvez-vous me donner des conseils sur la façon de faire fonctionner antd4 avec crea-react-app et dactylographié, s'il vous plaît?

@gynekolog ,
Veuillez vérifier si node_modules correctement installé.

réf https://codesandbox.io/s/cool-paper-4y1u7

@lvlohammadi Malheureusement, certains Chinois comme moi ne sont pas assez bons en anglais, mais je ferai de mon mieux pour utiliser la langue internationale pour participer à la communication communautaire.

@gynekolog ,
Veuillez vérifier si node_modules correctement installé.

réf https://codesandbox.io/s/cool-paper-4y1u7

Vous avez raison. je cours

yarn add "https://github.com/ant-design/ant-design.git#4.0-prepare"

au lieu

yarn add "[email protected]"

La honte...
Je vous remercie.

dropdownMatchSelectWidth on Select component break on alpha version, effective in the previous version

Si je dois démarrer un nouveau projet avec antd, choisiriez-vous la version 3 ou 4 alpha? Dans quelle mesure la version 4 est-elle «prête pour la production»? Visez-vous toujours une version Q4?

Si je dois démarrer un nouveau projet avec antd, choisiriez-vous la version 3 ou 4 alpha? Dans quelle mesure la version 4 est-elle «prête pour la production»? Visez-vous toujours une version Q4?

Antd 4 n'est pas encore prêt pour la production. Vous devriez commencer par antd 3, la transition devrait être facile (notamment si les codemods sont fournis comme prévu).

J'espère voir une séparation complète entre la logique et l'affichage, c'est-à-dire qu'à part la manipulation des noms de classe, js ne fait rien d'autre à la vue. L'apparence visuelle doit toutes être gérées par CSS (LESS). De plus, au lieu des composants React, utilisez peut-être des composants Web afin que les développeurs non React puissent l'utiliser plus facilement.

J'espère voir une séparation complète entre la logique et l'affichage, c'est-à-dire qu'à part la manipulation des noms de classe, js ne fait rien d'autre à la vue. L'apparence visuelle doit toutes être gérées par CSS (LESS). De plus, au lieu des composants React, utilisez peut-être des composants Web afin que les développeurs non React puissent l'utiliser plus facilement.

Je pense que cette idée de tout purifier est inutile. Il vaut mieux se concentrer sur quelque chose de plus important.

Des plans pour la sélection multiple dans la saisie semi-automatique, comme https://react-select.com?

J'espère voir une séparation complète entre la logique et l'affichage, c'est-à-dire qu'à part la manipulation des noms de classe, js ne fait rien d'autre à la vue. L'apparence visuelle doit toutes être gérées par CSS (LESS). De plus, au lieu des composants React, utilisez peut-être des composants Web afin que les développeurs non React puissent l'utiliser plus facilement.

Je pense que cette idée de tout purifier est inutile. Il vaut mieux se concentrer sur quelque chose de plus important.

Je ne pense pas qu'il y ait une question plus urgente que la séparation. Dans une équipe, CSS est généralement géré par des concepteurs, tandis que JS est généralement géré par des codeurs. Permettre aux deux de manipuler le style conduira au chaos et au temps de développement inutilement perdu.

Prenez Menu par exemple, la largeur et la hauteur par défaut sont définies par JS, le problème est que lorsque quelqu'un veut changer la largeur ou la hauteur de l'emballage extérieur, le menu ressortirait ou présenterait des espaces. Cela nécessiterait à la fois le concepteur et le codeur de corriger, ce qui signifie des temps d'arrêt.

De plus, en tant que composants, le code n'est pas trop complexe, la séparation ne devrait pas demander trop d'efforts, mais le résultat faciliterait beaucoup la vie des utilisateurs et de l'équipe ant.design elle-même.

Un autre petit problème, Icon doit être défini par défaut sur 16 pixels et non sur 14 pixels, qui est la taille de police par défaut globale. Cela signifie que Icon doit utiliser des variables telles que @ default-icon-size, @ icon-size-lg, etc., distinctes du texte. Ce n'est pas vraiment un bug, mais une fonctionnalité perdue.

@ afc163
Avez-vous pensé que les étrangers suivent ce repo? Malheureusement, Google Translate n'est pas un bon outil pour comprendre ce que vous dites. Je me rends compte que la plupart des développeurs et utilisateurs d'Ant-Design sont chinois, mais considérez-vous également des non-chinois?
Par conséquent, je vous exhorte à utiliser le langage international pour nous respecter tous.

Les gens ont le droit d'utiliser leur propre langue et devraient se sentir à l'aise de le faire, et même si je respecte l'effort visant à impliquer le plus grand public possible en fournissant des traductions, personne ne devrait avoir une conférence juste pour utiliser la langue avec laquelle il est le plus à l'aise. que le responsable comprend pour communiquer. L'idée que les principaux contributeurs de ce projet ne devraient pas utiliser leur langue maternelle pour communiquer car une autre langue est supérieure est au-delà de l'absurde. Il est normal de demander des traductions, mais avec respect. Refuser les réponses parce qu'elles sont en chinois est à la fois contre-productif et enfantin.

Mec, est-ce que And Design version 4.0 a JSS au lieu de _Less_ pour générer du CSS?

Mec, est-ce que And Design version 4.0 a JSS au lieu de _Less_ pour générer du CSS?

AFAIK, non. Mais vous pouvez essayer d'utiliser des composants stylisés (par exemple) en plus de moins.

Merci, cher @ tomgao365 , je crée le problème auquel vous l'avez référencé. Je veux faire un excellent PR pour supprimer Less complètement et utiliser JSS à la place. Travailler sur la version 3 n'est pas une bonne idée, car de nombreux projets ont été réalisés en utilisant la version 3, j'ai donc décidé de travailler sur l'implémentation de JSS sur la version 4.

Aussi, j'ai une petite question, cher @abenhamdine , quelle est votre idée d'utiliser JSS au lieu d'utiliser Less?

Aussi, j'ai une petite question, cher @abenhamdine , quelle est votre idée d'utiliser JSS au lieu d'utiliser Less?

Principaux avantages selon moi:

  • style dynamique (douleur avec moins)
  • autocompletion (pas sûr pour celui-là, dépend de l'outillage / bibliothèque JSS que vous utilisez)
  • héritage des styles

la peine d'essayer.
Mais ce n'est pas une solution miracle.

Cher @abenhamdine , je laisse un numéro qui a obtenu le badge Discussion . C'est # 19181.

Et je veux commencer à implémenter JSS et omettre Less, mais une nouvelle version arrive et j'ai peur que tous mes efforts soient vains.

Heureux de voir une discussion sur le remplacement de moment.js par une alternative comme Day.js ou un objet de date natif ici https://github.com/ant-design/ant-design/issues/19738

Y aura-t-il un moyen plus simple de changer les thèmes de couleur à l'aide de create-react-app dans la version 4?

Je suis d'accord avec @flashtheman pour remplacer le thème sans https://emotion.sh/docs/theming

À l'ère de jQuery, les paramètres de thème sont très populaires et les utilisateurs aiment l'utiliser.
J'attendais un moyen simple de modifier le thème dans l'environnement de production depuis plus de 2 ans.

Dans la nouvelle version du composant icon, si l'icône est déterminée dynamiquement, comment doit-elle être gérée dans la nouvelle version? Pour le moment, je ne peux penser qu'à utiliser des chaînes de variables require +. Il s'avère que je n'ai besoin que de remplir l'attribut type avec des variables. Existe-t-il un autre moyen de le gérer?
google translate: dans la nouvelle version du composant icon, si l'icône est déterminée dynamiquement, alors comment la gérer dans la nouvelle version, pour le moment ne peut penser qu'à la chaîne de variable require +, l'original n'a besoin que de remplir l'attribut type avec des variables, quelles autres méthodes de traitement?

Dans la nouvelle version du composant icon, si l'icône est déterminée dynamiquement, comment doit-elle être gérée dans la nouvelle version? Pour le moment, je ne peux penser qu'à utiliser des chaînes de variables require +. Il s'avère que je n'ai besoin que de remplir l'attribut type avec des variables. Existe-t-il un autre moyen de le gérer?
google translate: dans la nouvelle version du composant icon, si l'icône est déterminée dynamiquement, alors comment la gérer dans la nouvelle version, pour le moment ne peut penser qu'à la chaîne de variable require +, l'original n'a besoin que de remplir l'attribut type avec des variables, quelles autres méthodes de traitement?

Essayez d'utiliser https://github.com/smooth-code/loadable-components recommandé dans la documentation React

Quand la version officielle sera-t-elle publiée?

4.0 La table prend-elle en charge la fonction Pivot?

@ afc163 - On dirait que la pollution de style global est le problème numéro 1 que les gens veulent avec une nouvelle version. Avez-vous quelqu'un pour y travailler? Je serais heureux de faire ce travail et d'aider. Cela ne devrait pas être difficile, il faudra juste quelques efforts. Je souffre également de ce problème avec Ant Design. J'aimerais le résoudre.

Des travaux sont-ils en cours pour réduire la taille des composants?
Pour une fois: pourquoi si je veux un simple Button - je dois importer tout le fichier antd.css ??

Des travaux sont-ils en cours pour réduire la taille des composants?
Pour une fois: pourquoi si je veux un simple Button - je dois importer tout le fichier antd.css ??

@ avalanche1 Reportez-vous à https://ant.design/docs/react/introduce#Usage

Utilisez antd modulaire

Pour moi, un composant de téléchargement ne suffit pas actuellement pour prendre en charge le rendu de liste personnalisée.
De plus, la progression du téléchargement n'est qu'un pourcentage et il n'est pas pratique de l'étendre pour prendre en charge l'affichage de la vitesse en temps réel.

@ banxi1988

https://github.com/ant-design/ant-design/blob/c824569ea0810e2cf11bc2953b333eb0e404fd1c/components/upload/interface.tsx#L47 -L52

Si vous voulez un affichage de la vitesse, onChange a renvoyé le pourcentage du fichier qui a été téléchargé. Vous pouvez calculer la vitesse de téléchargement.

@ Z3SA https://caniuse.com/#search = CSS% 20Variables. Cela doit arrêter tout support IE, arrêter le support IE11 est trop radical, même si je soutiens également le faire.

Vous pouvez toujours le faire avec le support de secours. Ex: color: var(--red, @red); Une simple recherche / remplacement global pour toutes les variables actuelles résoudrait cela.

Est-ce que l'abandon de MOINS en faveur du SASS ou d'une autre meilleure solution de coiffage est envisagé pour la v4 ou non?

@murbanowicz , Salut, merci pour votre commentaire, je laisse un problème concernant l'utilisation de JSS au lieu de Less et ici, je montre ma préparation à cette migration mais personne ne montre aucune action.

Salut @zombieJ , merci pour votre excellent travail sur Ant Design? Existe-t-il des plans pour fournir un moyen prêt à l'emploi pour basculer le thème sombre dans l'application?

Une suggestion concernant le composant de formulaire:
Je suis très heureux de voir que dans la nouvelle version 4.0, le composant formulaire sera plus convivial pour les développeurs. J'ai vu un nouvel exemple, le composant Form.Item sous le composant Form n'aura plus besoin d'utiliser getFieldDecorator. C'est une très bonne amélioration, mais j'ai une suggestion plus radicale: supprimer le composant Form.Item, optimiser davantage l'expérience d'écriture de code et rendre le codage plus rafraîchissant. Les fonctions d'origine du composant Form.Item sont directement transférées vers des composants d'entrée spécifiques (tels que Input, DataPick, etc.).
Ceci pour tenir compte du fait que dans la plupart des cas, les formulaires développés utilisent les composants d'entrée intégrés d'antd, qui sont qualifiés pour réaliser la fonction du composant Form.Item en améliorant les capacités des composants d'entrée; et pour quelques cas particuliers (comme l'utilisateur self Définir les composants, certains composants d'entrée ne veulent pas être liés par Form), vous pouvez fournir des composants d'emballage spéciaux pour les instructions.
La recherche sur antd n'est pas approfondie et ne propose que des suggestions d'appel du point de vue des utilisateurs ordinaires. S'il y a quelque chose qui ne va pas, s'il vous plaît Haihan.

Une suggestion concernant le composant de formulaire:
Je suis très heureux de voir que dans la nouvelle version 4.0, le composant formulaire sera plus convivial pour les développeurs. J'ai vu un nouvel exemple, le composant Form.Item sous le composant Form n'aura plus besoin d'utiliser getFieldDecorator. C'est une très bonne amélioration, mais j'ai une suggestion plus radicale: supprimer le composant Form.Item, optimiser davantage l'expérience d'écriture de code et rendre le codage plus rafraîchissant. Les fonctions d'origine du composant Form.Item sont directement transférées vers des composants d'entrée spécifiques (tels que Input, DataPick, etc.).
Ceci pour tenir compte du fait que dans la plupart des cas, les formulaires développés utilisent les composants d'entrée intégrés d'antd, qui sont qualifiés pour réaliser la fonction du composant Form.Item en améliorant les capacités des composants d'entrée; et pour quelques cas particuliers (comme l'utilisateur self Définir les composants, certains composants d'entrée ne veulent pas être liés par Form), vous pouvez fournir des composants d'emballage spéciaux pour les instructions.
La recherche sur antd n'est pas approfondie et ne propose que des suggestions d'appel du point de vue des utilisateurs ordinaires. S'il y a quelque chose qui ne va pas, s'il vous plaît Haihan.

@shengliangli estime que le couplage est trop fort. . .

Une suggestion concernant le composant de formulaire:
Je suis très heureux de voir que dans la nouvelle version 4.0, le composant formulaire sera plus convivial pour les développeurs. J'ai vu un nouvel exemple, le composant Form.Item sous le composant Form n'aura plus besoin d'utiliser getFieldDecorator. C'est une très bonne amélioration, mais j'ai une suggestion plus radicale: supprimer le composant Form.Item, optimiser davantage l'expérience d'écriture de code et rendre le codage plus rafraîchissant. Les fonctions d'origine du composant Form.Item sont directement transférées vers des composants d'entrée spécifiques (tels que Input, DataPick, etc.).
Ceci pour tenir compte du fait que dans la plupart des cas, les formulaires développés utilisent les composants d'entrée intégrés d'antd, qui sont qualifiés pour réaliser la fonction du composant Form.Item en améliorant les capacités des composants d'entrée; et pour quelques cas particuliers (comme l'utilisateur self Définir les composants, certains composants d'entrée ne veulent pas être liés par Form), vous pouvez fournir des composants d'emballage spéciaux pour les instructions.
La recherche sur antd n'est pas approfondie et ne propose que des suggestions d'appel du point de vue des utilisateurs ordinaires. S'il y a quelque chose qui ne va pas, s'il vous plaît Haihan.

@shengliangli estime que le couplage est trop fort. . .

Je pense que Form.Item est un composant "extra" ajouté par antd afin de réaliser la fonction de liaison de données du composant Form.Il y a des raisons à cela, mais après tout, il ajoute une chose supplémentaire. Tout comme tout le monde critique le problème de trop de code modulaire dans redux, les développeurs peuvent ne pas aimer cette façon d'écrire. Si la fonction de liaison de données implémentée par form.item peut être comprise comme les caractéristiques des composants d'entrée tels que Input, afin d'améliorer les capacités des composants d'entrée, cela semble-t-il plus naturel?

J'ai aussi pensé au problème du couplage, dont la racine peut résider dans la façon dont nous définissons les capacités et les caractéristiques de comportement des composants d'entrée.

Une suggestion concernant le composant de formulaire:
Je suis très heureux de voir que dans la nouvelle version 4.0, le composant formulaire sera plus convivial pour les développeurs. J'ai vu un nouvel exemple, le composant Form.Item sous le composant Form n'aura plus besoin d'utiliser getFieldDecorator. C'est une très bonne amélioration, mais j'ai une suggestion plus radicale: supprimer le composant Form.Item, optimiser davantage l'expérience d'écriture de code et rendre le codage plus rafraîchissant. Les fonctions d'origine du composant Form.Item sont directement transférées vers des composants d'entrée spécifiques (tels que Input, DataPick, etc.).
Ceci pour tenir compte du fait que dans la plupart des cas, les formulaires développés utilisent les composants d'entrée intégrés d'antd, qui sont qualifiés pour réaliser la fonction du composant Form.Item en améliorant les capacités des composants d'entrée; et pour quelques cas particuliers (comme l'utilisateur self Définir les composants, certains composants d'entrée ne veulent pas être liés par Form), vous pouvez fournir des composants d'emballage spéciaux pour les instructions.
La recherche sur antd n'est pas approfondie et ne propose que des suggestions d'appel du point de vue des utilisateurs ordinaires. S'il y a quelque chose qui ne va pas, s'il vous plaît Haihan.

@shengliangli estime que le couplage est trop fort. . .

Je pense que Form.Item est un composant "extra" ajouté par antd afin de réaliser la fonction de liaison de données du composant Form.Il y a des raisons à cela, mais après tout, il ajoute une chose supplémentaire. Tout comme tout le monde critique le problème de trop de code modulaire dans redux, les développeurs peuvent ne pas aimer cette façon d'écrire. Si la fonction de liaison de données implémentée par form.item peut être comprise comme les caractéristiques des composants d'entrée tels que Input, afin d'améliorer les capacités des composants d'entrée, cela semble-t-il plus naturel?

J'ai aussi pensé au problème du couplage, dont la racine peut résider dans la façon dont nous définissons les capacités et les caractéristiques de comportement des composants d'entrée.

Je ne suis pas particulièrement d'accord.

Salut @zombieJ
Vous souhaitez savoir quand la version 4 sortira?
Au plaisir de vous entendre

Comment puis-je contribuer à la conception aussi.
Vous cherchez à entendre quelqu'un

La version beta.0 est disponible, cela signifie-t-il qu'elle peut être utilisée?

Une suggestion concernant le composant de formulaire:
Je suis très heureux de voir que dans la nouvelle version 4.0, le composant formulaire sera plus convivial pour les développeurs. J'ai vu un nouvel exemple, le composant Form.Item sous le composant Form n'aura plus besoin d'utiliser getFieldDecorator. C'est une très bonne amélioration, mais j'ai une suggestion plus radicale: supprimer le composant Form.Item, optimiser davantage l'expérience d'écriture de code et rendre le codage plus rafraîchissant. Les fonctions d'origine du composant Form.Item sont directement transférées vers des composants d'entrée spécifiques (tels que Input, DataPick, etc.).
Ceci pour tenir compte du fait que dans la plupart des cas, les formulaires développés utilisent les composants d'entrée intégrés d'antd, qui sont qualifiés pour réaliser la fonction du composant Form.Item en améliorant les capacités des composants d'entrée; et pour quelques cas particuliers (comme l'utilisateur self Définir les composants, certains composants d'entrée ne veulent pas être liés par Form), vous pouvez fournir des composants d'emballage spéciaux pour les instructions.
La recherche sur antd n'est pas approfondie et ne propose que des suggestions d'appel du point de vue des utilisateurs ordinaires. S'il y a quelque chose qui ne va pas, s'il vous plaît Haihan.

Tout d'abord, vous devez savoir que cela n'a rien à voir avec le fait qu'il soit intégré ou non. L'utilisation de composants dits intégrés peut être considérée comme un accident
getFieldDecorator est le pont qui relie le composant de formulaire et le composant d'entrée. Form.item est passé dans les deux attributs value et onChange , puis le composant encapsulé passe value et onChange Ces deux méthodes d'interface interagissent avec le monde extérieur. En d'autres termes, tout composant tant que value et onChange sont implémentés peut devenir des paramètres de getFieldDecorator .C'est l'idée typique de program to interface

PS: je n'ai pas lu le code source, tout ce qui précède est ma supposition après avoir lu le document

La raison pour laquelle Form.Item peut interagir avec le Component sous-jacent n'a rien à voir avec un mécanisme 'intégré' comme on s'y attend. C'est juste une astuce courante dans le monde de la programmation appelée program to interface

Fondamentalement, le composant Form et le composant sous-jacent s'accordent sur quelque chose comme value et onChange . Ils servent d'interface entre les deux mondes pour communiquer. C'est une bonne conception dans le but de découpler

@dancerphil Vous pouvez peut-être clarifier l'idée plus explicitement sur la documentation officielle

Salut à tous, la version bêta de la version 4 est disponible. L'API est désormais stable, ce qui signifie qu'aucune modification majeure n'est apportée à l'API, sauf en cas de problème critique. Pendant la version bêta, les concepteurs aideront à poursuivre l'ajustement de la conception visuelle de l'interface utilisateur et nous nous concentrerons sur la correction de bogues. N'hésitez pas à essayer et aidez-nous en cas de bug d'incendie ou de rétroaction.

Merci à tous de participer au codage et aux essais. Votre aide compte beaucoup :)


Bonjour à tous, la version bêta est sortie. S'il n'y a pas de problèmes de conception majeurs avec l'API, aucune autre modification ne sera apportée. Dans la version bêta, les concepteurs aideront à ajuster le style d'interface utilisateur de la v4 et nous nous concentrerons sur les corrections de bogues. Bienvenue pour nous aider à trouver des bugs ou avoir tout autre commentaire.

Merci d'avoir participé aux travaux de développement et d'essai. Votre aide est très significative :)


réf: http://new-issue.ant.design/

Comment puis-je contribuer à la conception aussi.
Vous cherchez à entendre quelqu'un

@ ekeminimarkk001 peut-être se référer: https://ant.design/docs/react/contributing

@zombieJ Toutes les modifications répertoriées dans le problème ont-elles été implémentées dans la version bêta?

Une suggestion concernant le composant de formulaire:
Je suis très heureux de voir que dans la nouvelle version 4.0, le composant formulaire sera plus convivial pour les développeurs. J'ai vu un nouvel exemple, le composant Form.Item sous le composant Form n'aura plus besoin d'utiliser getFieldDecorator. C'est une très bonne amélioration, mais j'ai une suggestion plus radicale: supprimer le composant Form.Item, optimiser davantage l'expérience d'écriture de code et rendre le codage plus rafraîchissant. Les fonctions d'origine du composant Form.Item sont directement transférées vers des composants d'entrée spécifiques (tels que Input, DataPick, etc.).
Ceci pour tenir compte du fait que dans la plupart des cas, les formulaires développés utilisent les composants d'entrée intégrés d'antd, qui sont qualifiés pour réaliser la fonction du composant Form.Item en améliorant les capacités des composants d'entrée; et pour quelques cas particuliers (comme l'utilisateur self Définir les composants, certains composants d'entrée ne veulent pas être liés par Form), vous pouvez fournir des composants d'emballage spéciaux pour les instructions.
La recherche sur antd n'est pas approfondie et ne propose que des suggestions d'appel du point de vue des utilisateurs ordinaires. S'il y a quelque chose qui ne va pas, s'il vous plaît Haihan.

Tout d'abord, vous devez savoir que cela n'a rien à voir avec le fait qu'il soit intégré ou non. L'utilisation de composants dits intégrés peut être considérée comme un accident
getFieldDecorator est le pont qui relie le composant de formulaire et le composant d'entrée. Form.item est passé dans les deux attributs value et onChange , puis le composant encapsulé passe value et onChange Ces deux méthodes d'interface interagissent avec le monde extérieur. En d'autres termes, tout composant tant que value et onChange sont implémentés peut devenir des paramètres de getFieldDecorator .C'est l'idée typique de program to interface

PS: je n'ai pas lu le code source, tout ce qui précède est ma supposition après avoir lu le document

Après avoir lu vos réponses, je dois dire que ma suggestion pour le composant de formulaire d'antd n'est pas trop mature, mais d'un autre côté, faire cette suggestion revient à réfléchir complètement au problème du point de vue d'un utilisateur ordinaire. Pour un composant avec une intensité d'utilisation aussi élevée, comment peut-il être plus pratique à développer et à utiliser, à écrire moins de code et à utiliser une expression plus claire et plus naturelle, est mon attente ardente d'antd.

Du point de vue de l'utilisateur, antd est déjà très bon: la plupart des composants peuvent être utilisés dès qu'ils sont utilisés, puis oubliés lorsqu'ils sont épuisés. La raison de cet effet est indissociable de la bonne conception d'API et de l'empaquetage des composants, mais il existe encore des scénarios d'utilisation des composants (tels que from, table), et il y a place pour une meilleure amélioration.

Antd n'est qu'un composant outil du projet. Il est préférable de ne pas exposer son propre mécanisme d'implémentation ou de cacher et d'assimiler intelligemment le mécanisme d'implémentation dans l'API externe. Les utilisateurs veulent simplement utiliser ce composant, ils veulent l'utiliser sous la forme la plus pratique et la plus naturelle, et ils ne veulent pas être un expert sur un composant d'outil.

De retour au composant de formulaire, sous l'API 3.x actuelle, je suis en fait plus disposé à utiliser uform d'Ali.Par rapport au formulaire antd, uform a besoin d'écrire moins de code et est plus productif. Bien sûr, uform ressemble plus à une façon d'écrire déclarative, qui est très différente de la forme d'antd et peut ne pas avoir beaucoup de valeur pour référence.

En tant qu'antd party, c'est un peu embarrassant de demander autant d'exigences, mais par amour, j'espère que c'est mieux, j'espère que l'équipe du projet comprend, et j'espère optimiser davantage l'expérience de développement et d'utilisation du composant sous la version appropriée. .

Très étrange. Je n'ai pas du tout utilisé Icon, mais j'y ai intégré toutes les icônes-svg.
webpack-bundle-analyzer.png
Numéro de version: 4.0.0-beta.0. Babel-plugin-import et tree-shaking sont utilisés, mais ils sont inutiles.

Très étrange. Je n'ai pas du tout utilisé Icon, mais j'y ai intégré toutes les icônes-svg.
webpack-bundle-analyzer.png
Numéro de version: 4.0.0-beta.0. Babel-plugin-import et tree-shaking sont utilisés, mais ils sont inutiles.

Utilisez cette configuration

{
                    test: /\.js?$/,
                    include: [/node_modules[\\\\/]antd/],
                    use: [
                        {
                            loader: 'babel-loader',
                            options: {
                                plugins: [
                                    '@babel/plugin-syntax-dynamic-import',
                                    [
                                        'import',
                                        {
                                            libraryName: 'antd',
                                            style: true,
                                            libraryDirectory: 'es',
                                        },
                                        'ant',
                                    ],
                                    [
                                        'import',
                                        {
                                            libraryName: '@ant-design/icons',
                                            customName: name => {
    const formatName = name.split('-').reduce((acum, value) => acum + value[0].toUpperCase() + value.slice(1), '');

    return `@ant-design/icons/lib/icons/${formatName}`;
};
                                        },
                                        '@ant-design/icons',
                                    ],
                                ],
                            },
                        },
                    ],
                },

Très étrange. Je n'ai pas du tout utilisé Icon, mais j'y ai intégré toutes les icônes-svg.
webpack-bundle-analyzer.png
Numéro de version: 4.0.0-beta.0. Babel-plugin-import et tree-shaking sont utilisés, mais ils sont inutiles.

Utilisez cette configuration

{
                    test: /\.js?$/,
                    include: [/node_modules[\\\\/]antd/],
                    use: [
                        {
                            loader: 'babel-loader',
                            options: {
                                plugins: [
                                    '@babel/plugin-syntax-dynamic-import',
                                    [
                                        'import',
                                        {
                                            libraryName: 'antd',
                                            style: true,
                                            libraryDirectory: 'es',
                                        },
                                        'ant',
                                    ],
                                    [
                                        'import',
                                        {
                                            libraryName: '@ant-design/icons',
                                            customName: name => {
    const formatName = name.split('-').reduce((acum, value) => acum + value[0].toUpperCase() + value.slice(1), '');

    return `@ant-design/icons/lib/icons/${formatName}`;
};
                                        },
                                        '@ant-design/icons',
                                    ],
                                ],
                            },
                        },
                    ],
                },

Merci pour votre réponse, mais je n'ai pas travaillé selon votre configuration.

Version: 4.0.0-beta.0
Problème: lorsque le composant modal visible est commuté, la page revient à l'adresse:

@xiaoxintang C'est corrigé dans la branche principale, en attente de fusion.

@ afc163 Comment installer antd4.0 beta

@ afc163 Comment installer antd4.0 beta

npm install [email protected]
OU
yarn add [email protected]

Il semble que le site de prévisualisation soit cassé. Je n'obtiens qu'une erreur Page non trouvée .

Une suggestion concernant le composant de formulaire:
Je suis très heureux de voir que dans la nouvelle version 4.0, le composant formulaire sera plus convivial pour les développeurs. J'ai vu un nouvel exemple, le composant Form.Item sous le composant Form n'aura plus besoin d'utiliser getFieldDecorator. C'est une très bonne amélioration, mais j'ai une suggestion plus radicale: supprimer le composant Form.Item, optimiser davantage l'expérience d'écriture de code et rendre le codage plus rafraîchissant. Les fonctions d'origine du composant Form.Item sont directement transférées vers des composants d'entrée spécifiques (tels que Input, DataPick, etc.).
Ceci pour tenir compte du fait que dans la plupart des cas, les formulaires développés utilisent les composants d'entrée intégrés d'antd, qui sont qualifiés pour réaliser la fonction du composant Form.Item en améliorant les capacités des composants d'entrée; et pour quelques cas particuliers (comme l'utilisateur self Définir les composants, certains composants d'entrée ne veulent pas être liés par Form), vous pouvez fournir des composants d'emballage spéciaux pour les instructions.
La recherche sur antd n'est pas approfondie et ne propose que des suggestions d'appel du point de vue des utilisateurs ordinaires. S'il y a quelque chose qui ne va pas, s'il vous plaît Haihan.

Vous pouvez essayer ceci: https://github.com/aweiu/ant-modifier

Y a-t-il des optimisations pour la pollution de style global?

Y a-t-il des optimisations pour la pollution de style global?

Antd semble avoir des préfixes, ce n'est pas de la pollution.Le code css de votre propre projet peut essayer d'utiliser des modules css pour résoudre le problème de la pollution mondiale

Y a-t-il des optimisations pour la pollution de style global?

Antd semble avoir des préfixes, ce n'est pas de la pollution.Le code css de votre propre projet peut essayer d'utiliser des modules css pour résoudre le problème de la pollution mondiale

Eh bien, je connais ce préfixe, je veux dire la pollution de la partie de réinitialisation css globale, qui est le problème de pollution causé par l'introduction de la réinitialisation antd et css dans les projets hérités.

Y a-t-il des optimisations pour la pollution de style global?

Antd semble avoir des préfixes, ce n'est pas de la pollution.Le code css de votre propre projet peut essayer d'utiliser des modules css pour résoudre le problème de la pollution mondiale

Pour plus de détails, veuillez vous référer à la discussion sur le problème dans le lien du site officiel: https://ant.design/docs/react/faq-cn#antd -% E8% A6% 86% E7% 9B% 96% E4% BA% 86% E6% 88 % 91% E7% 9A% 84% E5% 85% A8% E5% B1% 80% E6% A0% B7% E5% BC% 8F% EF% BC% 81

Existe-t-il un plan pour migrer la mise en page Antd Pro 4.0 depuis Antd Pro 4.0?
J'ai rencontré l'erreur SiderMenu.js Icon.createFromIconfontCN dans pro-layout lors de la migration du projet par moi-même. Comme la dépendance dans pro-layout est toujours la version v3, je ne sais pas comment changer la dépendance. Quelqu'un qui sait m'apprendra

Existe-t-il un plan pour migrer la mise en page Antd Pro 4.0 depuis Antd Pro 4.0?
J'ai rencontré l'erreur SiderMenu.js Icon.createFromIconfontCN dans pro-layout lors de la migration du projet par moi-même. Comme la dépendance dans pro-layout est toujours la version v3, je ne sais pas comment changer la dépendance. Quelqu'un qui sait m'apprendra

Étant donné que l'icône a été séparée dans 4.0, l'importation doit être modifiée, vous pouvez utiliser next.ant.design pour voir le document API actuel de l'icône

Merci pour votre contribution sur la version v4. Fermé depuis la sortie de la version 4.0.0-rc.0 : réf # 20661

StrictMode est-il un objectif? Le contexte hérité doit être migré https://github.com/ant-design/ant-design/issues/9870

Pouvons-nous conserver à la fois antd3 et antd4 dans le repo? On ne peut pas changer partout car le dépôt est trop gros et il réécrira presque la base de code complète.
Aussi si oui, pouvons-nous garder antd3 CSS dans le CSS global et antd4 pour juste un dossier et ses enfants

Cette page vous a été utile?
0 / 5 - 0 notes