Ant-design: Eine Liste der Komponenten von `antd`, die nicht mit HOC arbeiten können

Es ist schwierig, da einige Komponenten key als Teil der API verwenden. Wir können dies erst beheben, wenn wir alle API-Namen umbenannt haben. z.B

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

Es wird eine bahnbrechende Veränderung sein, aber eine solche bahnbrechende Veränderung kann durch antd-codemod gelöst werden .

Denken Sie, dass es sich lohnt, dies zu tun?

Ich halte das nicht für eine gute Idee.

Kein Fan von Codemod-Lösung.
Nur mein Standpunkt, aber ich glaube, dass es für die meisten Menschen leider eher abstoßend als willkommen ist.

Das Einbetten von Komponenten in benutzerdefinierte Komponenten ist in React üblich.

Bitte beheben Sie das Problem und sehen Sie, dass die Akzeptanz von Ant-Design ohne Zweifel schnell zunimmt.

Ant Design ist sehr ansprechend und die erste Bibliothek, die mich dazu bringt, den React-Bootstrap zu verlassen.

@ MacKentoch

Es ist schwierig, da einige Komponenten Schlüssel als Teil der API verwenden. Wir können dies erst beheben, wenn wir alle Namen der API umbenannt haben.

@ afc163 Wenn wir diese APIs nicht umbenennen können, können wir dieses Problem nicht lösen. Wir können jedoch Abhilfe schaffen: https://github.com/react-component/collapse/issues/73#issuecomment -323626120

Denken Sie, dass wir dies zur Dokumentation hinzufügen sollten?

@benjycui Ich verstehe.

Auf jeden Fall blockiert es doch nicht.

Vielen Dank, dass Sie sich die Zeit genommen haben, zu antworten.

@benjycui Ich habe die von Ihnen vorgeschlagene
Auch ich denke das ist kein kleines Problem. Wenn gemeinsame Komponenten nicht isoliert werden können, muss derselbe Code in einer Anwendung häufig wiederholt werden. Wenn die Anwendung groß ist, würde ich in Betracht ziehen, antd überhaupt nicht zu übernehmen. Bitte betrachten Sie dies als konstruktiven Kritiker.
Danke für deine Arbeit!

Ich bin damit einverstanden, dass dies kein kleines Problem ist, und ich hatte nicht damit gerechnet, als ich anfing, die Ant Design-Bibliothek zu verwenden. Die bewährten Methoden für benutzerdefinierte Komponenten werden in allen React-Projekten verwendet. Persönlich mag ich Ant Design sehr, aber für einige könnte dies ein Dealbreaker sein. Würde wirklich gerne sehen, dass dies in der kommenden Ant Design v3 verbessert wird.

Eine Lösung hierfür finden Sie in Version 3.

Kann behoben werden, nachdem dieses Paket veröffentlicht wurde (möglicherweise).

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

Ich bin gerade auf diesen Versuch gestoßen (sorry, wenn dies falsch ist), eine Navigationsleiste mithilfe des Menüs zu erstellen und React Router <Link /> Tags im Menü mit <Icon /> verschachteln.

Gibt es eine bevorzugte Lösung?

Meiner Meinung nach sollte dieser Thread in den offiziellen Dokumenten enthalten sein, da dieses Problem für viele Benutzer wahrscheinlich ein Dealbreaker ist.
In den Dokumenten sollte auch https://github.com/react-component/collapse/issues/73#issuecomment -323626120 als Alternative erwähnt werden, wenn kein Status benötigt wird.

Ich hätte es auf jeden Fall geschätzt, dies in der Dokumentation zu erwähnen! Ich habe versucht, so etwas zu tun, und viel Zeit verschwendet, weil es nicht funktioniert.

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

Wobei MyCollapseItem & MyCollapseItem2 die Collapse.Panel rendern.

Jetzt, da Sie mit react16 Arrays von Komponenten aus dem Rendering zurückgeben können, wäre es besonders hilfreich, dies zu tun. Andernfalls ist es schwierig, doppelten Code zu vermeiden.

Irgendwelche Updates dazu?

Dies ist tatsächlich ein großes Problem für uns. Ich würde für die Umbenennung stimmen, da es keine Problemumgehung gibt, die mir einfällt.

Gleiches hier - ich brauche das für Tabs.TabPane und Menu.MenuItem .

Ich habe eine Problemumgehung gefunden, mit der Sie den Rest der Requisiten weitergeben können von der verpackten Komponente.

Wenn Sie mit React.Children.map(children, (child, index) => { ... }) funktioniert die Problemumgehung zumindest für mich nicht. Am Ende erhält die Schlüsseleigenschaft einen Wert wie mykey/.0 , mit dem ich nicht arbeiten kann. Ich würde auch für eine Namensänderung auf den Eigenschaften stimmen.

Dieses Problem kann mich tatsächlich von Antd vertreiben ... Oder zumindest dazu führen, dass ich einen Ersatz für diese Komponenten finde. Es schränkt Ihre Fähigkeit, wiederverwendbare Komponenten zu erstellen, wirklich ein.

Für alle, die versuchen, React Router in einem Menü zu verwenden. Artikel @yunshuipiao hatte eine erfolgreiche Lösung, die für mich in # 6576 funktioniert hat

Ein weiteres kleines Problem: Wrapping Menu.Item verhindert auch, dass das Untermenü ausgewählt angezeigt wird, wenn eines seiner untergeordneten Elemente ausgewählt wird, zumindest im vertikalen Modus. Relevante Zeilen:

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

Ich dachte, ich würde dies für diejenigen dokumentieren, die versuchen, Collapse mit einer benutzerdefinierten Komponente zum Laufen zu bringen : Ähnlich wie bei

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


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

Gleiches Problem wie @ncknuna.

Menu.Item werden beim Umschließen nicht ausgewählt. Gibt es eine Problemumgehung?

@Nomeyho Am Ende ant-menu-submenu-selected hinzugefügt wird, indem ich die relevanten Methoden kopiert / eingefügt und den ursprünglichen Scheck auskommentiert und die Klasse dann als className in meinem Wrapper übergeben habe:

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>
  )
}

Gibt es eine Lösung dafür?

Ich bin mit @ChuckJonas einverstanden

Dieses Problem kann mich tatsächlich von Antd vertreiben ... Oder zumindest dazu führen, dass ich einen Ersatz für diese Komponenten finde. Es schränkt Ihre Fähigkeit, wiederverwendbare Komponenten zu erstellen, wirklich ein.

Ich muss Menu SubMenu und Menu.items wie folgt verwenden:
Warum? weil ich meine "CustomSubMenu" -Elemente auf anderen Seiten verwenden kann ... ist dies ein wichtiger Bestandteil von "wiederverwendbaren" Komponenten.

_MainFile.js_

Import CustomSubMenu from './OtherFile.js';

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

und OtherFile.js wie folgt:

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

Temporäre Problemumgehung (der Einfachheit halber bearbeitet) für Untermenüs:

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

Beim Umgang mit Arrays:

• Requisiten weitergeben
• Fügen Sie eventKey und subMenuKey , die eindeutig sein sollten

Ein besserer Ansatz wäre wahrscheinlich:

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

Verwendung:

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

Auch hier möchten Sie den Index wahrscheinlich nicht im Array verwenden, verwenden Sie ihn also nicht in der Produktion, aber die Idee ist solide.

• 1 für die Möglichkeit, Antd-Komponenten in benutzerdefinierte Komponenten einzubetten. Dies ist für uns machen oder brechen

Ich denke, wir haben eine Möglichkeit, die Abhängigkeit des Schlüssels zu beseitigen. Nehmen wir als Beispiel das Menü, wir können eine itemKey Requisite einführen und dann das context , um das Menü zu implementieren. Um die Kompatibilität aufrechtzuerhalten, durchläuft das Menü weiterhin die untergeordneten Elemente und ändert die key in itemKey falls angezeigt. Gleichzeitig können wir auch die Semantik von Requisiten wie selectedKeys .

@yesmeck um ehrlich zu sein ant design ( aber ich

Soweit ich weiß, könnten Sie die Reaktion auf neue context API als Problemumgehung nutzen?

Das sind tolle Neuigkeiten

Ja, wir müssen context anstelle von cloneElement , um das Problem zu lösen.

Ich denke, eine Lösung besteht darin, "React.Children.forEach" und "React.cloneElement" nicht zu verwenden, um Requisiten zu übergeben und neue Requisiten zu setzen. Verwenden Sie eine Funktion, zum Beispiel für benutzerdefinierte:

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

und antd select source verwenden auch untergeordnete Funktionsrequisiten anstelle von "React.Children.forEach" und "React.cloneElement".

Entschuldigen Sie, wenn dies eine dumme Frage ist, aber ich bin noch ziemlich neu in React and Ant Design.
Bedeutet dies, dass wir praktisch keine Ant-Design-Menüs in einem mit React-Redux verbundenen SPA verwenden können?
Wenn ja, wie können Sie mit Ant Design ein relativ komplexes SPA schreiben? Gibt es eine Problemumgehung?

Gibt es hierzu Neuigkeiten?

Gibt es ein Update zu diesem Problem? Der Menüpunkt verhält sich mit HOC seltsam.

Hallo ! Auch hier bin ich sehr daran interessiert, diese Art von Komponenten anpassen zu können.
Eigentlich das Problem mit einem benutzerdefinierten Select.Option

Keine in diesem Thread vorgeschlagene Problemumgehung hat mir geholfen, es zum Laufen zu bringen. Ich habe eine funktionierende Auswahl mit leeren Optionen.

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;

Ich habe angefangen, CASL zu verwenden, um UI-Elemente basierend auf Benutzerberechtigungen zu rendern. Ich bin jedoch auf das Problem gestoßen, dass SubMenus nicht gerendert werden, weil der Aufruf der Funktion isRootMenu fehlschlägt, da die Requisiten nicht korrekt an die untergeordneten Elemente weitergegeben werden.

Als Workaround habe ich das SubMenus als Konstanten definiert und die Requisiten 'von Hand' übergeben:
`` ``
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>
);

}}
`` ``

Diese Lösung ist nicht sehr praktisch, funktioniert aber vorerst. Ich habe jedoch immer noch das Problem, dass der Titel des Untermenüs, das ein Symbol enthält, nicht korrekt gerendert wird. Das Symbol fehlt.

Hat jemand eine Idee, wie man das behebt?

Ich habe hier ein Schaufenster erstellt: https://github.com/gibelium/meteor-react-antd-casl

GitHub

Gibelium / Meteor-React-Antd-Casl

Schaufenster für die Verwendung der CASL-Autorisierungsbibliothek in einer Meteor / React-Umgebung unter Verwendung der Ant-Design-UI-Bibliothek - Gibelium / Meteor-React-Antd-Casl

@gibelium Ich denke, dass das Rendern von

@gotjoshua Wirst du dieses spezielle Problem erstellen?

Das Festlegen der erweiterten Standardmenüelemente funktioniert ebenfalls nicht. Meine Problemumgehungsimplementierung ignoriert die Eigenschaft defaultOpenKeys von Menu.

Irgendwelche Ideen, wie man das löst?

Dieses Problem sollte wirklich in den Dokumenten erwähnt werden. Ich habe einen ganzen Arbeitstag damit verbracht, diesen Fehler zu untersuchen, nur um zu verstehen, dass diese Bibliothek für mich unbrauchbar ist. Bitte, bitte, bitte geben Sie eine Warnung ein, damit andere Entwickler nicht so viel Zeit damit verschwenden müssen, herauszufinden, dass Sie ein Anti-Pattern verwendet haben, das auf React-Tasten weiterleitet, und jetzt sind Sie für so viele HOCs oder Dekorateure, die der Community zur Verfügung stehen, sehr zerbrechlich.
Das ist wirklich eine Schande. Ich hoffe, Sie werden es in Ihrer nächsten Hauptversion beheben.

Gibt es ein Update zu diesem Problem? Menü festlegen defaultOpenKeys funktioniert nicht

Total etwas, das wirklich schnell als hohe Priorität angesehen werden sollte. 🔥

Ich habe einen ähnlichen Anwendungsfall, den ich (wahrscheinlich) nicht implementieren kann.
Ich möchte eine mit Redux verbundene Komponente erstellen, die Select mit Optionen rendert, die auf Daten im Redux-Speicher basieren. Da ich nicht überall den gleichen Code "kopieren und einfügen" möchte, möchte ich diese Art von Komponente in Form.getFieldDecorator , aber aufgrund der Verwendung von connect HOC kann ich das nicht es.

EDIT: Ich habe die Lösung für meinen Anwendungsfall gefunden. Ich konnte eine solche Komponente wie oben beschrieben mit der Option forwardRef wie folgt erstellen:
connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(Component);
Diese Lösung ist spezifisch für connect HOC, aber Sie sollten in der Lage sein, eine ähnliche Lösung mithilfe von React.forwardRef zu erstellen.

Zusätzlich zu früheren Kommentaren - ja, ich denke auch, dass dies als hohe Priorität angesehen werden könnte. Nachdem ich eines meiner Probleme erfolgreich gelöst hatte (wie oben beschrieben), musste ich jetzt eine Tabs.TabPane -Komponente erstellen, die mit meiner benutzerdefinierten Komponente umschlossen ist. Ich habe einen sehr häufigen Anwendungsfall -> Die Wrapping-Komponente wird zum Überprüfen von Berechtigungen verwendet. Wenn also Bedingungen erfüllt sind, wird die untergeordnete Komponente gerendert, andernfalls nicht.

Gibt es dafür eine einfache und funktionierende Problemumgehung?

Irgendwelche Updates dazu bitte?

Ich habe eine Problemumgehung gefunden, mit der Sie den Rest der Requisiten weitergeben können von der verpackten Komponente.

Dies zeigt Konsolenwarnungen an. Wie kann dies behoben werden?
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` stattdessen. Wenn Sie es versehentlich von einer übergeordneten Komponente übergeben haben, entfernen Sie es aus dem DOM-Element.

index.js: 1437 Warnung: Ungültiger Wert für prop dispatch on

gleiches Problem ... Ich möchte eine Berechtigungskomponente als HOC erstellen, um Menu.Item zu verpacken, aber antd erlaubt dies nicht ... traurig

Ich habe einige Zeit mit diesem Thema verbracht ...

und es ist machbar 🎉, Sie müssen nur Ruhe Requisiten an dh übergeben. Collapse.Panel (überprüfen Sie den Quellcode von rc-panel, um ihn zu verstehen)

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

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

und dann benutze es so:

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

Es wäre fantastisch, diese Lösung in der Version 4.0 zu sehen!

Dies hat absolut hohe Priorität.
Macht diese Komponenten buchstäblich unbrauchbar, wenn spezielle Verhaltensweisen erforderlich sind (manchmal sogar einfache, wie z. B. die Autorisierung).
Zum Beispiel versuche ich, ein dynamisch geladenes Menü zu erstellen, also zeige ich buchstäblich ein deaktiviertes Menu.Item mit einem Drehfeld als Namen an, bis die Daten eintreffen.
Das ist alles andere als optimal.

Ich habe einige Zeit mit diesem Thema verbracht ...

und es ist machbar 🎉, Sie müssen nur Ruhe Requisiten an dh übergeben. Collapse.Panel (überprüfen Sie den Quellcode von rc-panel, um ihn zu verstehen)

Obwohl es eine großartige Lösung ist (ich verwende sie wirklich in meinen Projekten), verlieren Sie einige Funktionen.
Dh wenn Ihr <SubMenu> kein direktes Kind von <Menu> , funktioniert defaultOpenKeys nicht. 😞

Ich bin gerade auf dieses Problem gestoßen.

Muss auf jeden Fall in der Dokumentation bestätigt werden. Es ist sehr frustrierend, auf dieses Problem zu stoßen (neben einigen anderen kleineren), das mich dazu bringt, die Verwendung von AntDesign in meinen Projekten ernsthaft zu überdenken.

Ich kann nicht glauben, dass es dafür noch keine Lösung gibt.

Dies muss wirklich behoben werden. Die meisten Entwickler verwenden nicht einfach sofort einsatzbereite Komponenten. Dies bedeutet, dass wir möglicherweise mehr Funktionen integrieren möchten, die ansonsten nicht über die bereitgestellte API hinzugefügt werden können. Ich würde HOCs nicht als nicht häufigen Anwendungsfall mit niedriger Priorität bezeichnen. Es ist grundlegend für die Zusammensetzung von React.

Bitte beheben Sie dies und fügen Sie während der Behebung die Informationen sowie die hier gefundenen Problemumgehungen in Ihre offiziellen Dokumente ein.

Bitte beheben Sie dies und fügen Sie während der Behebung die Informationen sowie die hier gefundenen Problemumgehungen in Ihre offiziellen Dokumente ein.

Maintainer sind offen für PR. Sie können auch eine PR für ein Dokumentupdate senden, wenn Sie möchten und die Zeit dazu haben.

@ afc163

Ich habe einige Zeit mit diesem Thema verbracht ...

und es ist machbar, Sie müssen nur Ruhe Requisiten an dh übergeben. Collapse.Panel (überprüfen Sie den Quellcode von rc-panel, um ihn zu verstehen)

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

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

und dann benutze es so:

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

Kann jemand bitte erklären, was unten passiert. Versuchen Sie auch, Panel in eine Komponente einzuschließen.

Wenn ich diesen Code benutze ::

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

innerhalb von PersonalInfoPanel :

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

Es funktioniert nicht.

Aber sobald ich dies stattdessen benutze:

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

es beginnt zu arbeiten.
Kann jemand erklären warum?

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

es beginnt zu arbeiten.

Kann jemand erklären warum?

Soweit ich weiß, muss der übergeordnete Collapse andere Requisiten als Header, Schlüssel und Extra festlegen (aus Ihrem nicht funktionierenden Beispiel). Diese Requisiten aus dem übergeordneten Collapse müssen explizit in die Panel-Komponente Ihrer benutzerdefinierten Komponente eingefügt werden.

Ich denke, Sie könnten den React Inspector verwenden, um alle möglichen Requisiten zu lernen, die sich ändern, und sie einzeln zu übergeben, aber die ... Requisitensyntax stellt sicher, dass alles, was die Eltern zu ihrem untergeordneten Panel hinzufügen möchten, angehängt wird ( einschließlich, aber nicht beschränkt auf diejenigen, die Sie explizit festlegen müssen)

Dieses Problem muss behoben werden.
Viele (oder fast) Entwickler möchten die Bibliothek für benutzerdefinierte Komponenten verwenden.

Beispiel)
Dieser Code funktioniert nicht. Weil Menü und Menüelement undurchsichtige Requisiten benötigen.

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

@moonjoungyoung @adamerose
Hast du den Thread gelesen?
Sie müssen Ruhe-Requisiten an die innere Antd-Komponente übergeben, damit sie funktioniert.

Hier ist, was für mich funktioniert hat, um benutzerdefinierte Komponenten + bedingtes Rendern für react-router NavLinks innerhalb eines antd Menu , obwohl dies wirklich behoben werden muss - ich habe es verschwendet viel Zeit, bevor Sie diesen Thread finden.

_edit- Nevermind, selectedKeys funktioniert nicht richtig_

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
Hast du den Thread gelesen?
Sie müssen Ruhe-Requisiten an die innere Antd-Komponente übergeben, damit sie funktioniert.

Können Sie sich mein Beispiel oben ansehen? Ich dachte, ich hätte jede Arbeit in diesem Thread angewendet, aber es funktioniert immer noch nicht richtig. Ich gebe die Requisiten weiter und verteile sie auf dem Menu.Item aber es wird immer noch nicht hervorgehoben, wenn es aktiv ist, und der Komponentenbaum sieht so aus

Ich habe einige Zeit mit diesem Thema verbracht ...

und es ist machbar, Sie müssen nur Ruhe Requisiten an dh übergeben. Collapse.Panel (überprüfen Sie den Quellcode von rc-panel, um ihn zu verstehen)

In meinem Fall muss ich "header = {berechne_header}" hinter "{... Requisiten}" setzen. Wenn ich das nicht mache, wird die Kopfzeile des Panels nicht angezeigt. Ich denke, "{... Requisiten}", das später in der Sequenz erscheint, überschreibt die "Header" -Informationen. Wenn ich am Anfang "{... Requisiten}" setze, funktioniert es. In diesem Fall denke ich, dass der "Header", der später erscheint, die "Header" -Informationen in den Requisiten überschreibt.

Meine Anpassung an die @ marcin-piela-Antwort lautet wie folgt:

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> };