Ant-design: Une liste des composants de `antd` qui ne peuvent pas fonctionner avec HOC

C'est difficile, pour certains composants utilisent key dans le cadre de l'API, nous ne pouvons pas résoudre ce problème tant que nous n'avons pas renommé tous les noms de l'API. par exemple

key => id
expandedKeys => expandedIds
selectedKeys => selectedIds
....

Ce sera un changement de rupture, mais ce type de changement de rupture peut être résolu par antd-codemod .

Alors, pensez-vous que cela en vaut la peine?

Je ne pense pas que ce soit une bonne idée.

Pas fan de la solution codemod.
Juste mon point de vue, mais je crois que malheureusement pour la plupart des gens, c'est plus répugnant que bienvenu.

L'intégration de composants dans des composants personnalisés est une pratique courante dans React.

Veuillez le réparer et voir sans aucun doute l'adoption de la conception de fourmi augmenter rapidement.

Ant Design est vraiment attrayant et c'est la première bibliothèque qui me donne envie de quitter react-bootstrap.

@MacKentoch

C'est difficile, car certains composants utilisent la clé dans le cadre de l'API, nous ne pouvons pas résoudre ce problème tant que nous n'avons pas renommé tous les noms de l'API.

@ afc163 si nous ne pouvons pas renommer ces API, nous ne pouvons pas résoudre ce problème. Mais nous pouvons fournir une solution de contournement, voir: https://github.com/react-component/collapse/issues/73#issuecomment -323626120

Pensez-vous que nous devrions ajouter cela à la documentation?

@benjycui Je comprends.

Quoi qu'il en soit, ce n'est pas bloquant après tout.

Merci d'avoir pris le temps de répondre.

@benjycui J'étudiais la solution de contournement que vous avez proposée mais je pense que ce n'est pas une solution appropriée. Habituellement, lorsque vous enveloppez un composant, vous souhaitez également avoir un état interne. Avec la solution proposée, cela n'est pas possible.
Je pense également que ce n'est pas un petit problème. Ne pas être en mesure d'isoler des composants communs signifie avoir le même code répété plusieurs fois dans une application. Si l'application est grande, j'envisagerais de ne pas adopter du tout antd. Veuillez considérer cela comme un critique constructif.
Merci pour votre travail!

Je suis d'accord pour dire que ce n'est pas un petit problème et c'est quelque chose auquel je ne m'attendais pas lorsque j'ai commencé à utiliser la bibliothèque Ant Design, les bonnes pratiques des composants personnalisés sont utilisées dans tous les projets React. Personnellement, j'aime beaucoup Ant Design, mais pour certains, cela pourrait être un facteur décisif. J'adorerais vraiment voir cela amélioré dans la prochaine Ant Design v3.

Veuillez trouver une solution pour cela dans la v3.

Peut être résolu après la publication de ce package (peut-être).

https://github.com/ant-design/ant-design/issues/5540

vient de rencontrer cette tentative (désolé si c'est faux) de créer une barre de navigation en utilisant le menu et en imbriquant les balises React Router <Link /> dans le menu avec <Icon /> .

Existe-t-il une solution plus préférée?

À mon humble avis, ce fil devrait être dans la documentation officielle, car ce problème est susceptible d'être un facteur décisif pour de nombreux utilisateurs.
La documentation doit également mentionner https://github.com/react-component/collapse/issues/73#issuecomment -323626120 comme alternative lorsqu'aucun état n'est nécessaire.

J'aurais certainement apprécié de mentionner cela dans la documentation! J'essayais de faire quelque chose comme ça et j'ai perdu pas mal de temps parce que ça ne marche pas.

<Collapse>
   <MyCollapseItem />
   <MyCollapseItem2 />
</Collapse>

Où MyCollapseItem & MyCollapseItem2 rend le Collapse.Panel .

De plus, maintenant que react16 vous permet de renvoyer des tableaux de composants à partir du rendu, il serait particulièrement utile de pouvoir le faire. Sinon, empêcher le code en double est difficile.

Des mises à jour à ce sujet?

C'est en fait un problème majeur pour nous. Je voterais pour le changement de renommage, car il n'y a pas de solution de contournement à laquelle je puisse penser.

Idem ici - j'en ai besoin pour Tabs.TabPane et Menu.MenuItem .

J'ai trouvé une solution de contournement, vous pouvez passer le reste des accessoires avec du composant enveloppé.

Si vous utilisez avec React.Children.map(children, (child, index) => { ... }) la solution de contournement ne fonctionne pas, du moins pour moi. En fin de compte, la propriété clé obtient une valeur comme mykey/.0 ce qui n'est pas ce que je peux travailler. Je voterais également pour un changement de nom sur les propriétés.

ce problème peut en fait m'éloigner de antd ... Ou du moins me faire trouver un remplaçant pour ces composants. Cela limite vraiment votre capacité à créer des composants réutilisables.

Pour tous ceux qui essaient d'utiliser React Router dans un menu, l'élément @yunshuipiao avait une solution réussie qui a fonctionné pour moi dans # 6576

Autre petit problème: le wrapping de Menu.Item empêche également le sous-menu d'apparaître sélectionné lorsqu'un de ses éléments enfants est sélectionné, au moins en mode vertical. Lignes pertinentes:

https://github.com/react-component/menu/blob/018d6f84d622ee140d9695ba57e7a773cf368efa/src/util.js#L40
https://github.com/react-component/menu/blob/018d6f84d622ee140d9695ba57e7a773cf368efa/src/SubMenu.jsx#L314

Je pensais que je documenterais ceci pour ceux qui essaient de faire fonctionner Collapse avec un composant personnalisé: De la même manière que @jfreixa a mentionné, il suffit de transmettre tous les accessoires donnés au composant personnalisé au Panel, par exemple

<Collapse>
  <Custom/>
  <Custom/>
</Collapse>


Custom.render() {
  return (
    <Panel {...this.props}>
      <div>My custom stuff here</div>
    </Panel>
  )
}

Même problème que @ncknuna.

Les éléments de menu ne sont pas sélectionnés lorsqu'ils sont emballés. Y at-il un travail autour?

@Nomeyho J'ai fini par reconstruire la logique qui détermine si la classe ant-menu-submenu-selected est ajoutée en copiant / collant les méthodes pertinentes et en commentant le chèque d'origine, puis en passant la classe en tant que className dans mon wrapper:

function loopMenuItemRecusively (children: Array<any>, keys: Array<string>, ret: { find: boolean }) {
  if (!children || ret.find) {
    return
  }
  React.Children.forEach(children, (c: any) => {
    if (ret.find) {
      return
    }
    if (c) {
      const construt = c.type
      // Original check that caused problems. I'm not concerned about omitting it
      // because I don't plan on putting a bunch of weird, large stuff in my menus...
      // if (!construt || !(construt.isSubMenu || construt.isMenuItem || construt.isMenuItemGroup)) {
      //   return;
      // }
      if (keys.indexOf(c.key) !== -1) {
        ret.find = true
      } else if (c.props && c.props.children) {
        loopMenuItemRecusively(c.props.children, keys, ret)
      }
    }
  })
}

function isChildrenSelected (children: Array<any>, selectedKeys: Array<string>) {
  const ret = { find: false }
  loopMenuItemRecusively(children, selectedKeys, ret)
  return ret.find
}

// Omitting other custom code below...
export const SubMenu = ({ children, className, selectedKeys, title, ...rest }: any) => {
  const isSelected = isChildrenSelected(children, selectedKeys)
  className = [
    className,
    isSelected ? 'ant-menu-submenu-selected' : ''
  ].filter(className => classname).join(' ')
  return (
    <SubMenu title={title} className={className} selectedKeys={selectedKeys} {...rest}>
      {children}
    </SubMenu>
  )
}

Y a-t-il une solution à cela?

Je suis d'accord avec @ChuckJonas

ce problème peut en fait m'éloigner de antd ... Ou du moins me faire trouver un remplaçant pour ces composants. Cela limite vraiment votre capacité à créer des composants réutilisables.

J'ai besoin d'utiliser Menu SubMenu et Menu.items comme ceci:
Pourquoi? parce que je peux utiliser mes éléments "CustomSubMenu" dans d'autres pages ... c'est une partie importante des composants "réutilisables".

_MainFile.js_

Import CustomSubMenu from './OtherFile.js';

<Menu>
    <CustomSubMenu />
    <CustomSubMenu2 />
    <CustomSubMenu3 />
</Menu>

et OtherFile.js comme ceci:

render(){
 return(
     <SubMenu>
           <SubMenu.item />
           <SubMenu.item2 />
            etc...etc...
     </SubMenu>
 );
}

Solution provisoire (modifiée par souci de simplicité) pour les sous-menus:

const SubMenuArray = ({ ...props }) =>
  [1, 2].map(i => (
    <Menu.SubMenu {...props} eventKey={`item_${i}`} subMenuKey={`${i}-menu-`} />
  ));

Lorsque vous traitez avec des tableaux:

• transmettre des accessoires
• ajoutez eventKey et subMenuKey , qui doivent être uniques

Une meilleure approche serait probablement:

const SubMenuWrapper = ({ children, ...props }) =>
  React.Children.map(children, (child, i) =>
    React.cloneElement(child, {
      ...props,
      eventKey: `item_${i}`,
      subMenuKey: `${i}-menu-`
    })
  );

Usage:

      <Menu>
        <SubMenuWrapper>
          <CustomSubMenu title={"one"}/>
          <CustomSubMenu title={"two"}/>
        </SubMenuWrapper>
      </Menu>

Encore une fois, vous ne souhaitez probablement pas utiliser l'index dans le tableau, alors ne l'utilisez pas en production, mais l'idée est solide.

• 1 pour la possibilité d'incorporer des composants antd dans des composants personnalisés. C'est faire ou défaire pour nous

Je pense que nous avons un moyen de supprimer la dépendance de la clé. Prenons l'exemple de Menu, nous pouvons introduire un accessoire itemKey , puis utiliser context pour implémenter le menu. Afin de maintenir la compatibilité, le Menu traverse toujours les enfants et change le key en itemKey s'il présente. Dans le même temps, nous pouvons également conserver la sémantique des accessoires tels que selectedKeys .

@yesmeck pour être honnête, cela prend du temps car je n'utilise pas ant design ( mais je prévois de l'utiliser pour une application importante dans cette semaine ).

Autant que je sache, vous pourriez bénéficier du React new context API comme solution de contournement?

C'est une excellente nouvelle

Oui, nous avons besoin de context au lieu de cloneElement pour résoudre le problème.

Je pense qu'une solution n'est pas d'utiliser "React.Children.forEach" et "React.cloneElement" pour passer des accessoires et définir de nouveaux accessoires, utilisez une fonction, par exemple pour custom:

<Select>
  {({ onSelect }) => (
    <div>
      <Option onClick={onSelect} key="0">option1</Option>
      <Option onClick={onSelect} key="1">option2</Option>
    </div>
  )
</Select>

et antd select source utilisent également des accessoires de fonction enfants plutôt que "React.Children.forEach" et "React.cloneElement"

Excusez-moi si c'est une question stupide, mais je suis encore assez nouveau dans React et Ant Design.
Cela signifie-t-il que nous ne pouvons pratiquement pas utiliser les menus de conception Ant dans un SPA connecté React-Redux?
Si oui, comment pouvez-vous écrire un SPA relativement complexe avec Ant Design? Y at-il un travail autour?

Une mise à jour pour ceci?

y a-t-il une mise à jour sur ce problème? L'élément de menu se comporte bizarrement avec HOC.

Salut ! Pareil ici, je suis vraiment intéressé à pouvoir personnaliser ce type de composants.
J'ai en fait le problème avec un Select.Option

Aucune solution de contournement proposée dans ce fil ne m'a aidé à le faire fonctionner, j'ai une sélection de travail avec des options vides ....

import React from 'react';
import PropTypes from 'prop-types';
import { Select } from 'antd';

const { Option } = Select;

const PictureOption = ({ label, value, pictureId, ...props }) => (
    <Option label={label} value={value} className="select-item" {...props}>
        <div className="select-item__thumbnail">
            <img src={pictureId} alt="item-img" />
        </div>
        <div className="select-item__name">{label}</div>
    </Option>
);

PictureOption.propTypes = {
    label: PropTypes.string.isRequired,
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
    pictureId: PropTypes.string.isRequired,
};

export default PictureOption;

J'ai commencé à utiliser CASL pour rendre les éléments de l'interface utilisateur en fonction de l'autorisation de l'utilisateur. Cependant, j'ai rencontré le problème que les sous-menus ne sont pas rendus car l'appel à la fonction isRootMenu échoue en raison du fait que les accessoires ne sont pas correctement propagés aux éléments enfants.

Comme solution de contournement, j'ai défini les sous-menus comme des constantes et passé les accessoires `` à la main '':
`` ``
render () {

// ### Administration Menu ###
const AdminMenu = ({ ...props }) => {
  return (
    <Can I="access" on="admin-content">
      <Menu.Divider {...props} />
      <Menu.SubMenu
        {...props}
        title={
          // FIXME: Icon is not rendered... :-/
          <span>
            <Icon type="tools" />
            <span>Administration</span>
          </span>
        }
        // title={<span>Administration</span>}
        key="admin">
        <Menu.Item key="users" tabIndex={0}>
          <Icon type="android" />
          <span>User Administration</span>
        </Menu.Item>
        <Menu.Item key="permissions" tabIndex={0}>
          <Icon type="lock" />
          <span>Permissions</span>
        </Menu.Item>
      </Menu.SubMenu>
    </Can>
  );
};

return (
  <Layout id="menu-component-layout">
    <Layout.Sider width="300px" collapsible="false" trigger={null}>
      <Menu theme="dark" mode="inline" defaultSelectedKeys={['user']} defaultOpenKeys={['user', 'config', 'admin']}>
        <AdminMenu />
      </Menu>
    </Layout.Sider>
    <Layout.Content id="menu-component-content">
      <h3>Page containing a side menu</h3>
    </Layout.Content>
  </Layout>
);

}
`` ``

Cette solution n'est pas très pratique mais elle fonctionne pour l'instant. Cependant, j'ai toujours le problème que le titre du sous-menu qui comprend une icône n'est pas correctement rendu. L'icône est manquante.

Quelqu'un a-t-il une idée de comment résoudre ce problème?

J'ai créé une vitrine ici: https://github.com/gibelium/meteor-react-antd-casl

GitHub

gibelium / meteor-react-antd-casl

Vitrine pour l'utilisation de la bibliothèque d'autorisation CASL dans un environnement meteor / react en utilisant la bibliothèque d'interface utilisateur ant-design - gibelium / meteor-react-antd-casl

@gibelium Je pense que le rendu des icônes mérite en fait son propre problème. J'ai cloné votre dépôt et essayé de remplacer l'icône par un bouton fantôme et le contour du bouton est visible, mais l'icône ne s'affiche pas non plus dans / sur le bouton ...

@gotjoshua allez-vous créer ce numéro dédié?

La définition des éléments de menu développé par défaut ne fonctionne pas non plus. L'implémentation de ma solution de contournement ignore la propriété defaultOpenKeys de Menu.

Des idées pour résoudre cela?

Ce problème devrait vraiment être mentionné dans la documentation, j'ai perdu une journée de travail complète à rechercher ce bogue pour comprendre que cette bibliothèque est inutilisable pour moi. Veuillez s'il vous plaît mettre un avertissement pour que les autres développeurs n'aient pas à perdre autant de temps à comprendre que vous avez utilisé un anti-motif, en relais sur les touches React, et maintenant vous êtes très fragile pour autant de HOC ou de décorateurs disponibles pour la communauté.
C'est vraiment dommage. J'espère que vous le corrigerez dans votre prochaine version majeure.

y a-t-il une mise à jour sur ce problème? Définir le menu par défautOpenKeys ne fonctionne pas

Totalement quelque chose qui devrait être très rapidement considéré comme hautement prioritaire. 🔥

J'ai un cas d'utilisation similaire que je ne suis (probablement) pas capable de mettre en œuvre.
Je voudrais créer un composant connecté redux qui rend Select avec des options basées sur les données dans le magasin redux. Comme je ne veux pas "copier-coller" le même code partout, j'aimerais utiliser ce type de composant à l'intérieur de Form.getFieldDecorator , mais en raison de l'utilisation de connect HOC je ne suis pas capable de faire il.

EDIT: j'ai trouvé la solution pour mon cas d'utilisation. J'ai pu créer un tel composant comme décrit ci-dessus avec l'option forwardRef comme ceci:
connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(Component);
Cette solution est spécifique pour connect HOC, mais vous devriez pouvoir créer une solution similaire en utilisant React.forwardRef .

En plus des commentaires précédents - oui, je pense aussi que cela pourrait être considéré comme hautement prioritaire. Après avoir résolu avec succès l'un de mes problèmes (comme je l'ai décrit ci-dessus), je devrais maintenant créer Tabs.TabPane composant

Existe-t-il une solution de contournement simple et efficace pour cela?

des mises à jour à ce sujet s'il vous plaît?

J'ai trouvé une solution de contournement, vous pouvez passer le reste des accessoires avec du composant enveloppé.

Ceci montre les avertissements de la console. Un moyen de résoudre ce problème?
index.js:1437 Warning: React does not recognize the staticContext prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase staticcontext` à la place. Si vous l'avez passé accidentellement à partir d'un composant parent, supprimez-le de l'élément DOM.

index.js: 1437 Attention: valeur non valide pour prop dispatch on

même problème ... je veux créer un composant d'autorisation en tant que HOC pour envelopper le Menu.Item mais antd ne le permet pas

J'ai passé du temps sur cette question ...

et c'est faisable 🎉, il vous suffit de passer les accessoires de repos à ie. Collapse.Panel (vérifiez le code source de rc-panel pour le comprendre)

export const CustomPanel: React.FC = ({ header, children, ...props }) => {
  // do whatever you like

  return <Collapse.Panel header={header} {...props}>
    {children}
  </Collapse.Panel>
};

puis utilisez-le comme ça:

<Collapse>
    <CustomPanel key="first" header="Header 1">Body</CustomPanel>
    <CustomPanel key="second" header="Header 2">Body</CustomPanel>
</Collapse>

Ce serait génial de voir cette solution dans la version 4.0!

C'est une priorité absolue.
Rend littéralement ces composants inutilisables lorsque des comportements spéciaux sont requis (parfois même simples, comme l'autorisation).
Par exemple, j'essaie de créer un menu chargé dynamiquement, donc j'affiche littéralement un Menu.Item désactivé avec un spinner comme nom jusqu'à ce que les données arrivent.
C'est loin d'être optimal.

J'ai passé du temps sur cette question ...

et c'est faisable 🎉, il vous suffit de passer les accessoires de repos à ie. Collapse.Panel (vérifiez le code source de rc-panel pour le comprendre)

Bien que ce soit une excellente solution (vraiment! Je l'utilise dans mes projets), vous perdez certaines fonctionnalités.
Ie Si votre <SubMenu> n'est pas un enfant direct de <Menu> , defaultOpenKeys ne fonctionnera pas. 😞

Je viens de rencontrer ce problème FYI.

Nécessite certainement une reconnaissance dans la documentation. Sérieusement frustrant de rencontrer ce problème (parmi d'autres mineurs) qui me fait reconsidérer sérieusement l'utilisation d'AntDesign dans mes projets.

Je ne peux pas croire qu'il n'y ait toujours pas de solution à cela.

Cela doit vraiment être corrigé. La plupart des développeurs n'utilisent pas simplement des composants directement prêts à l'emploi. Cela signifie que nous pourrions vouloir intégrer plus de fonctionnalités qui ne pourraient pas être ajoutées autrement via l'API fournie. Je n'appellerais pas les HOC un cas d'utilisation non courant ou de faible priorité. Il est fondamental pour la nature compositionnelle de React.

S'il vous plaît, corrigez cela, et pendant que cela est corrigé, ajoutez les informations, ainsi que les solutions de contournement que les gens ont trouvées ici dans vos documents officiels.

S'il vous plaît, corrigez cela, et pendant que cela est corrigé, ajoutez les informations, ainsi que les solutions de contournement que les gens ont trouvées ici dans vos documents officiels.

Les responsables sont ouverts aux relations publiques, vous pouvez également envoyer un PR pour une mise à jour des documents si vous le souhaitez et avoir le temps de le faire.

@ afc163

J'ai passé du temps sur cette question ...

et c'est faisable, il vous suffit de passer les accessoires de repos à ie. Collapse.Panel (vérifiez le code source de rc-panel pour le comprendre)

export const CustomPanel: React.FC = ({ header, children, ...props }) => {
  // do whatever you like

  return <Collapse.Panel header={header} {...props}>
    {children}
  </Collapse.Panel>
};

puis utilisez-le comme ça:

<Collapse>
    <CustomPanel key="first" header="Header 1">Body</CustomPanel>
    <CustomPanel key="second" header="Header 2">Body</CustomPanel>
</Collapse>

Quelqu'un peut-il expliquer ce qui se passe ci-dessous. Essayez également d'encapsuler Panel dans un composant.

Si j'utilise ce code::

 <PersonalInfoPanel
                header="header"
                key={"personalInfo" + i}
                extra={genExtra()}
            />

à l'intérieur PersonalInfoPanel :

function PersonalInfoPanel(props, ref) {
    return (
        <Panel header={props.header} key={props.key} extra={props.extra}>
...

Ça ne marche pas.

Mais dès que j'utilise ceci à la place:

function PersonalInfoPanel(props, ref) {
    return (
        <Panel {...props}>
...

ça commence à fonctionner.
Quelqu'un peut-il expliquer pourquoi?

 <Panel {...props}>
...

ça commence à fonctionner.

Quelqu'un peut-il expliquer pourquoi?

Si je comprends bien, le parent Collapse devra définir des accessoires autres que l'en-tête, la clé et les suppléments (à partir de votre exemple non fonctionnel). Ces accessoires du Collapse parent doivent être explicitement placés sur le composant Panel dans votre composant personnalisé.

Je suppose que vous pouvez utiliser l'inspecteur de réaction pour apprendre tous les accessoires possibles qui vont changer et les transmettre un par un, mais la syntaxe ... props garantit que tout ce que le parent veut ajouter à son panneau enfant sera attaché ( y compris, mais sans s'y limiter, ceux que vous devez explicitement définir)

Ce problème doit être résolu.
BEAUCOUP (ou presque) développeurs veulent utiliser la bibliothèque pour personnaliser les composants.

Exemple)
Ce code ne fonctionne pas. Parce que le menu et l'élément de menu ont besoin d'accessoires opaques.

      <Menu>
        { menus.map((item) => {
          if (item.to) {
            return <Menu.Item title={item.title} />;
          }
          // some codes...
          return null;
        })}
      </Menu>

@moonjoungyoung @adamerose
avez-vous lu le fil?
Vous devez passer les accessoires de repos au composant antd interne pour le faire fonctionner.

Voici ce qui a fonctionné pour moi pour obtenir des composants personnalisés + un rendu conditionnel pour react-router NavLinks intérieur d'un antd Menu , vraiment bien que cela ait besoin d'une solution - j'ai perdu tellement beaucoup de temps avant de trouver ce fil.

_edit- Nevermind, selectedKeys ne fonctionne pas correctement_

const Nav = withRouter(() => {
  const auth = store.isAuthenticated;

  return (
    <Menu selectedKeys={[history.location.pathname]} mode="horizontal">
      <NavItem id="/">Home</NavItem>
      {auth && <NavItem id="/create">Create Post</NavItem>}
      {!auth && <NavItem id="/sign-in">Sign In</NavItem>}
      {!auth && <NavItem id="/register">Register</NavItem>}
    </Menu>
  );
});

const NavItem = ({ ...props }) => (
  <Menu.Item {...props} key={props.id}>
    <NavLink exact to={props.id}>
      {props.children}
    </NavLink>
  </Menu.Item>
);

@moonjoungyoung @adamerose
avez-vous lu le fil?
Vous devez passer les accessoires de repos au composant antd interne pour le faire fonctionner.

Pouvez-vous jeter un œil à mon exemple ci-dessus? Je pensais avoir appliqué tous les travaux dans ce fil, mais cela ne fonctionne toujours pas correctement. Je passe les accessoires et les répartis sur le Menu.Item mais il ne sera toujours pas mis en surbrillance lorsqu'il est actif, et l'arborescence des composants ressemble à ceci

J'ai passé du temps sur cette question ...

et c'est faisable, il vous suffit de passer les accessoires de repos à ie. Collapse.Panel (vérifiez le code source de rc-panel pour le comprendre)

Dans mon cas, je dois mettre "header = {calculé_header}" derrière "{... props}". Si je ne fais pas cela, l'en-tête du panneau ne s'affiche pas. Je pense que "{... props}" qui apparaît plus tard dans la séquence écrase les informations "en-tête". Quand je mets "{... props}" au début, ça marche. Dans ce cas, je pense que le "header" qui apparaît plus tard écrase les informations "header" dans les accessoires.

Mon adaptation à la réponse @ marcin-piela est la suivante:

export const CustomPanel: React.FC = ({ headerinfo, children, ...props }) => { // do whatever you like const calculated_header = {() => headerinfo.someinformation } return <Collapse.Panel {...props} header={calculated_header} > {children} </Collapse.Panel> };