Ant-design: Daftar komponen `antd` yang tidak dapat bekerja dengan HOC

Sulit, untuk beberapa komponen menggunakan key sebagai bagian dari API, kami tidak dapat memperbaikinya hingga kami mengganti nama semua nama API. misalnya

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

Ini akan menjadi perubahan yang merusak, tetapi perubahan yang merusak semacam itu dapat diselesaikan dengan antd-codemod .

JADI, menurut Anda apakah hal itu layak dilakukan?

Saya rasa ini bukan ide yang bagus.

Bukan penggemar solusi codemod.
Hanya sudut pandang saya, tetapi, saya percaya bahwa sayangnya bagi kebanyakan orang itu lebih menjijikkan daripada disambut.

Menyematkan komponen ke dalam komponen khusus adalah praktik umum di React.

Harap perbaiki dan lihat adopsi desain semut meningkat pesat tanpa keraguan.

Ant Design sangat menarik dan merupakan library pertama yang membuat saya ingin meninggalkan react-bootstrap.

@Bayu_joo

Sulit, untuk beberapa komponen menggunakan kunci sebagai bagian dari API, kami tidak dapat memperbaikinya hingga kami mengganti nama semua nama API.

@ afc163 jika kami tidak dapat mengganti nama API tersebut, maka kami tidak dapat menyelesaikan masalah ini. Tetapi kami dapat memberikan solusi, lihat: https://github.com/react-component/collapse/issues/73#issuecomment -323626120

Menurut Anda, apakah kami harus menambahkan ini ke dokumentasi?

@benjycui saya mengerti.

Bagaimanapun, itu tidak menghalangi sama sekali.

Terima kasih telah meluangkan waktu untuk menjawab.

@benjycui Saya sedang menyelidiki solusi yang Anda usulkan, tetapi menurut saya ini bukan solusi yang tepat. Biasanya ketika Anda membungkus sebuah komponen, Anda juga ingin memiliki beberapa status internal. Dengan solusi yang diusulkan, hal ini tidak mungkin dilakukan.
Juga menurut saya ini bukan masalah kecil. Tidak dapat mengisolasi komponen umum berarti memiliki kode yang sama berulang kali di dalam aplikasi. Jika aplikasinya besar, saya akan mempertimbangkan untuk tidak mengadopsi antd sama sekali. Harap pertimbangkan ini sebagai kritik yang membangun.
Terima kasih atas pekerjaan Anda!

Setuju untuk mengatakan ini bukan masalah kecil dan itu adalah sesuatu yang tidak saya harapkan ketika saya mulai menggunakan pustaka Ant Design, praktik yang baik dari komponen khusus digunakan di seluruh proyek React. Secara pribadi, saya sangat menyukai Ant Design, tetapi bagi sebagian orang, ini bisa menjadi dealbreaker. Akan sangat senang melihat ini ditingkatkan di Ant Design v3 mendatang.

Temukan solusi untuk ini di v3.

Bisa diselesaikan setelah paket ini dirilis (mungkin).

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

baru saja menjalankan ini mencoba (maaf jika ini salah) untuk membuat navbar menggunakan menu dan bersarang React Router <Link /> tag di Menu dengan <Icon /> .

Apakah ada solusi yang lebih disukai?

IMHO, utas ini harus ada di dokumen resmi, karena masalah ini cenderung menjadi pemecah masalah bagi banyak pengguna.
Dokumen tersebut juga harus menyebutkan https://github.com/react-component/collapse/issues/73#issuecomment -323626120 sebagai alternatif saat status tidak diperlukan.

Saya pasti akan menghargai penyebutan ini dalam dokumentasi! Saya mencoba melakukan sesuatu seperti ini dan membuang banyak waktu karena tidak berhasil.

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

Dimana MyCollapseItem & MyCollapseItem2 membuat Collapse.Panel .

Juga, sekarang react16 memungkinkan Anda untuk mengembalikan array komponen dari render, mampu melakukan ini akan sangat membantu. Jika tidak, mencegah kode duplikat itu menantang.

Ada pembaruan tentang ini?

Ini sebenarnya masalah besar bagi kami. Saya akan memilih untuk mengganti nama perubahan yang melanggar, karena tidak ada solusi yang dapat saya pikirkan.

Sama di sini - saya membutuhkannya untuk Tabs.TabPane dan Menu.MenuItem .

Saya menemukan solusi pada dasarnya Anda dapat melewatkan sisa alat peraga dengan dari komponen yang dibungkus.

Jika Anda menggunakan dengan React.Children.map(children, (child, index) => { ... }) solusi tidak bekerja, setidaknya untuk saya. Pada akhirnya, properti kunci mendapatkan nilai seperti mykey/.0 yang tidak dapat saya kerjakan. Saya juga akan memilih perubahan nama pada properti.

masalah ini sebenarnya dapat membuat saya menjauh dari antd ... Atau setidaknya menyebabkan saya mencari pengganti untuk komponen ini. Ini benar-benar membatasi kemampuan Anda untuk membuat komponen yang dapat digunakan kembali.

Bagi siapa pun yang mencoba menggunakan React Router dalam Menu. Item @yunshuipiao memiliki solusi sukses yang berhasil untuk saya di # 6576

Masalah kecil lainnya: wrapping Menu. Item ini juga mencegah Submenu agar tidak muncul saat salah satu item turunannya dipilih, setidaknya dalam mode vertikal. Garis yang relevan:

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

Pikir saya akan mendokumentasikan ini untuk mereka yang mencoba membuat Ciutkan bekerja dengan komponen khusus: Sama halnya dengan apa yang disebutkan @jfreixa , cukup teruskan semua props yang diberikan ke komponen khusus ke Panel, mis.

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


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

Masalah yang sama dengan @ncknuna.

Menu. Item tidak dipilih saat dibungkus. Apakah ada solusinya?

@Nomeyho Saya akhirnya merekonstruksi logika yang menentukan apakah kelas ant-menu-submenu-selected ditambahkan dengan menyalin / menempel metode yang relevan dan mengomentari cek asli, kemudian meneruskan kelas sebagai className di pembungkus saya:

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

Apakah ada perbaikan untuk ini?

Saya setuju dengan @ChuckJonas

masalah ini sebenarnya dapat membuat saya menjauh dari antd ... Atau setidaknya menyebabkan saya mencari pengganti untuk komponen ini. Ini benar-benar membatasi kemampuan Anda untuk membuat komponen yang dapat digunakan kembali.

Saya perlu menggunakan Menu SubMenu dan Menu. Item seperti ini:
Mengapa? karena saya dapat menggunakan elemen "CustomSubMenu" saya di halaman lain ... ini adalah bagian penting dari komponen "dapat digunakan kembali".

_MainFile.js_

Import CustomSubMenu from './OtherFile.js';

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

dan OtherFile.js seperti ini:

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

Solusi sementara (diedit untuk kesederhanaan) untuk Submenu:

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

Saat menangani array:

• mewariskan alat peraga
• tambahkan eventKey dan subMenuKey , yang harus unik

Pendekatan yang lebih baik mungkin adalah:

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

Pemakaian:

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

Sekali lagi, Anda mungkin tidak ingin menggunakan indeks dalam larik, jadi jangan gunakan ini dalam produksi, tetapi idenya solid.

• 1 untuk kemampuan embed komponen antd ke komponen custom. Ini membuat atau menghancurkan bagi kita

Saya pikir kami memiliki cara untuk menghilangkan ketergantungan kunci. Ambil Menu sebagai contoh, kita dapat memperkenalkan itemKey prop dan kemudian menggunakan context untuk mengimplementasikan Menu. Untuk menjaga kompatibilitas, Menu masih melintasi anak-anak dan mengubah key menjadi itemKey jika ada. Pada saat yang sama, kita juga dapat mempertahankan semantik props seperti selectedKeys .

@yesmeck sejujurnya itu membuat beberapa saat karena saya tidak menggunakan ant design ( tetapi berencana menggunakannya untuk aplikasi penting dalam minggu ini ).

Sejauh yang saya mengerti, Anda bisa mendapatkan keuntungan dari bereaksi context API sebagai solusi?

Itu berita bagus

Ya, kita perlu context bukan cloneElement untuk menyelesaikan masalah.

Saya pikir solusinya adalah tidak menggunakan "React.Children.forEach" dan "React.cloneElement" untuk meneruskan props dan mengatur props baru, gunakan fungsi, misalnya untuk custom:

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

dan antd pilih sumber juga menggunakan alat peraga anak fungsi daripada "React.Children.forEach" dan "React.cloneElement"

Maaf jika ini adalah pertanyaan yang bodoh, tapi saya masih cukup baru dalam React and Ant Design.
Apakah ini berarti bahwa secara praktis kita tidak dapat menggunakan menu desain Ant di dalam SPA yang terhubung dengan react-redux?
Jika demikian, bagaimana Anda bisa menulis SPA yang relatif rumit dengan Desain Semut? Apakah ada solusinya?

Ada pembaruan tentang ini?

apakah ada pembaruan tentang masalah ini? Item menu berperilaku aneh dengan HOC.

Hai! Sama di sini, saya sangat tertarik untuk dapat menyesuaikan komponen semacam ini.
Sebenarnya mengalami masalah dengan Select.Option ubahsuaian

Tidak ada solusi yang diusulkan di utas ini yang membantu saya membuatnya berfungsi, saya memiliki pilihan yang berfungsi dengan opsi kosong ....

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;

Saya mulai menggunakan CASL untuk merender elemen UI berdasarkan izin pengguna. Namun saya mengalami masalah bahwa SubMenus tidak diberikan karena panggilan ke fungsi isRootMenu gagal karena fakta bahwa alat peraga tidak disebarkan dengan benar ke elemen anak.

Sebagai solusi, saya mendefinisikan SubMenus sebagai konstanta dan diteruskan di props 'dengan tangan':
`` ''
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>
);

}
`` ''

Solusi ini tidak terlalu berguna tetapi berfungsi untuk saat ini. Namun saya masih memiliki masalah bahwa judul SubMenu yang menyertakan ikon tidak dirender dengan benar. Ikonnya hilang.

Apakah ada yang punya ide bagaimana memperbaikinya?

Saya membuat etalase di sini: https://github.com/gibelium/meteor-react-antd-casl

GitHub

gibelium / meteor-react-antd-casl

Etalase penggunaan pustaka otorisasi CASL di lingkungan meteor / react menggunakan pustaka UI ant-design - gibelium / meteor-react-antd-casl

@gibelium Menurut saya, rendering ikon layak mendapatkan masalahnya sendiri. Saya mengkloning repo Anda dan mencoba mengganti ikon dengan tombol hantu dan garis besar tombol terlihat, tetapi ikon juga tidak merender di / pada tombol ...

@ Gotjoshua akankah Anda membuat edisi khusus itu?

Menyetel item menu default yang diperluas juga tidak berfungsi. Implementasi solusi saya mengabaikan properti defaultOpenKeys dari Menu.

Ada ide bagaimana mengatasinya?

Masalah ini harus benar-benar disebutkan dalam dokumen, saya menghabiskan satu hari kerja penuh untuk meneliti bug ini hanya untuk memahami bahwa perpustakaan ini tidak dapat digunakan untuk saya. Tolong beri peringatan agar pengembang lain tidak perlu membuang banyak waktu untuk mengetahui Anda menggunakan anti-pola, menyampaikan kunci React, dan sekarang Anda sangat rentan terhadap begitu banyak HOC atau dekorator yang tersedia untuk komunitas.
Ini sungguh memalukan. Saya harap Anda akan memperbaikinya di versi utama berikutnya.

apakah ada pembaruan tentang masalah ini? Set Menu defaultOpenKeys tidak berfungsi

Benar-benar sesuatu yang harus dianggap sangat cepat sebagai prioritas tinggi. 🔥

Saya memiliki kasus penggunaan serupa yang (mungkin) tidak dapat saya implementasikan.
Saya ingin membuat komponen yang terhubung ke redux yang menghasilkan Select dengan opsi berdasarkan data di toko redux. Karena saya tidak ingin "menyalin-menempel" kode yang sama di mana-mana, saya ingin menggunakan jenis komponen ini di dalam Form.getFieldDecorator , tetapi karena menggunakan connect HOC, saya tidak dapat melakukannya Itu.

EDIT: Saya menemukan solusi untuk kasus penggunaan saya. Saya dapat membuat komponen seperti yang dijelaskan di atas dengan opsi forwardRef seperti ini:
connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(Component);
Solusi ini khusus untuk connect HOC, tetapi Anda harus dapat membuat solusi serupa dengan menggunakan React.forwardRef .

Selain komentar sebelumnya - ya saya juga berpikir bahwa ini dapat dianggap sebagai prioritas tinggi. Setelah saya berhasil menyelesaikan salah satu masalah saya (seperti yang saya jelaskan di atas), sekarang saya perlu membuat Tabs.TabPane komponen yang dibungkus dengan komponen khusus saya. Saya memiliki use-case yang sangat umum -> komponen pembungkus digunakan untuk memeriksa perizinan, jadi jika kondisi terpenuhi, komponen anak dirender, jika tidak tidak.

Apakah ada solusi sederhana dan berhasil untuk ini?

ada pembaruan tentang ini?

Saya menemukan solusi pada dasarnya Anda dapat melewatkan sisa alat peraga dengan dari komponen yang dibungkus.

Ini menunjukkan peringatan konsol. Adakah cara untuk mengatasi ini?
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` sebagai gantinya. Jika Anda tidak sengaja meneruskannya dari komponen induk, hapus dari elemen DOM.

index.js: 1437 Peringatan: Nilai tidak valid untuk prop dispatch pada

masalah yang sama ... Saya ingin membuat komponen izin sebagai HOC untuk membungkus Menu.Item tetapi antd tidak mengizinkan ini ... sedih

Saya menghabiskan beberapa waktu untuk masalah itu ...

dan Ini bisa dilakukan 🎉, Anda hanya perlu memberikan alat peraga istirahat ke ie. Ciutkan Panel (periksa kode sumber rc-panel untuk memahaminya)

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

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

dan kemudian gunakan seperti itu:

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

Akan sangat luar biasa melihat solusi ini di rilis 4.0!

Ini benar-benar prioritas tinggi.
Secara harfiah membuat komponen tersebut tidak dapat digunakan saat perilaku khusus diperlukan (terkadang bahkan yang sederhana, seperti otorisasi).
Sebagai contoh, saya mencoba membuat menu yang dimuat secara dinamis, jadi saya benar-benar menampilkan Menu.Item dinonaktifkan dengan spinner sebagai namanya sampai datanya tiba.
Itu jauh dari optimal.

Saya menghabiskan beberapa waktu untuk masalah itu ...

dan Ini bisa dilakukan 🎉, Anda hanya perlu memberikan alat peraga istirahat ke ie. Ciutkan Panel (periksa kode sumber rc-panel untuk memahaminya)

Meskipun ini adalah solusi yang bagus (sungguh! Saya menggunakannya dalam proyek saya) Anda kehilangan beberapa fungsionalitas.
Yaitu Jika <SubMenu> bukan anak langsung dari <Menu> , defaultOpenKeys tidak akan berfungsi. 😞

Baru saja mengalami masalah ini FYI.

Jelas membutuhkan pengakuan dalam dokumentasi. Sangat frustasi untuk menemukan masalah ini (di antara beberapa masalah kecil lainnya) yang membuat saya serius mempertimbangkan kembali menggunakan AntDesign dalam proyek saya.

Saya tidak percaya masih belum ada perbaikan untuk itu.

Ini benar-benar perlu diperbaiki. Sebagian besar pengembang tidak hanya menggunakan komponen langsung dari kotaknya. Ini berarti bahwa kami mungkin ingin mengintegrasikan lebih banyak fungsionalitas yang tidak dapat ditambahkan meskipun api disediakan. Saya tidak akan menyebut HOC sebagai kasus penggunaan yang tidak umum atau prioritas rendah. Ini adalah dasar dari sifat komposisi React.

Tolong, perbaiki ini, dan sementara sedang diperbaiki, tambahkan informasi, serta solusi yang ditemukan orang di sini ke dalam dokumen resmi Anda.

Tolong, perbaiki ini, dan sementara sedang diperbaiki, tambahkan informasi, serta solusi yang ditemukan orang di sini ke dalam dokumen resmi Anda.

Pemelihara terbuka untuk PR, Anda juga dapat mengirim PR untuk pembaruan dokumen jika Anda mau dan punya waktu untuk melakukannya.

@fachrizal

Saya menghabiskan beberapa waktu untuk masalah itu ...

dan Ini bisa dilakukan, Anda hanya perlu memberikan alat peraga istirahat ke ie. Ciutkan Panel (periksa kode sumber rc-panel untuk memahaminya)

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

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

dan kemudian gunakan seperti itu:

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

Bisakah seseorang menjelaskan apa yang terjadi di bawah ini. Juga mencoba untuk membungkus Panel di dalam sebuah komponen.

Jika saya menggunakan kode ini::

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

di dalam PersonalInfoPanel :

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

Itu tidak berhasil.

Tetapi segera setelah saya menggunakan ini sebagai gantinya:

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

itu mulai bekerja.
Bisakah seseorang menjelaskan mengapa?

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

itu mulai bekerja.

Bisakah seseorang menjelaskan mengapa?

Seperti yang saya pahami, Ciutkan induk perlu mengatur props selain header, key, dan ekstra (dari contoh yang tidak berfungsi). Properti ini dari Ciutkan induk harus secara eksplisit dimasukkan ke Komponen Panel dalam komponen kustom Anda.

Saya rasa Anda dapat menggunakan React Inspector untuk mempelajari semua props yang mungkin akan berubah dan meneruskannya satu per satu, tetapi sintaks ... props memastikan bahwa apa pun yang ingin ditambahkan orang tua ke Panel anaknya akan dilampirkan ( termasuk tetapi tidak terbatas pada yang secara eksplisit perlu Anda setel)

Masalah ini perlu diperbaiki.
BANYAK (atau .. hampir) developer ingin menggunakan pustaka untuk Komponen kustom.

Contoh)
Kode ini tidak berfungsi. Karena Menu dan Item Menu membutuhkan props Buram.

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

@bulanjoungyoung @adamerose
apakah kamu membaca utasnya?
Anda harus memberikan rest props ke komponen antd bagian dalam untuk membuatnya bekerja.

Inilah yang berhasil bagi saya untuk mendapatkan komponen khusus + rendering bersyarat untuk react-router NavLinks di dalam antd Menu , sungguh meskipun ini perlu diperbaiki - saya menyia-nyiakannya banyak waktu sebelum menemukan utas ini.

_edit- Nevermind, selectedKeys tidak berfungsi dengan benar_

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

@bulanjoungyoung @adamerose
apakah kamu membaca utasnya?
Anda harus memberikan rest props ke komponen antd bagian dalam untuk membuatnya bekerja.

Bisakah Anda melihat contoh saya di atas? Saya pikir saya telah menerapkan setiap pekerjaan di utas ini tetapi masih tidak berfungsi dengan baik. Saya meneruskan props ke bawah dan menyebarkannya pada Menu.Item tetapi masih tidak akan disorot saat aktif, dan pohon komponen terlihat seperti ini

Saya menghabiskan beberapa waktu untuk masalah itu ...

dan Ini bisa dilakukan, Anda hanya perlu memberikan alat peraga istirahat ke ie. Ciutkan Panel (periksa kode sumber rc-panel untuk memahaminya)

Dalam kasus saya, saya harus meletakkan "header = {terhitung_header}" di belakang "{... props}". Jika saya tidak melakukan ini, header panel tidak muncul. Saya pikir "{... props}" yang muncul kemudian dalam urutan menimpa informasi "header". Saat saya meletakkan "{... props}" di awal, itu berhasil. Dalam hal ini, saya pikir "header" yang muncul kemudian menimpa informasi "header" di props.

Adaptasi saya terhadap tanggapan @ marcin-piela adalah sebagai berikut:

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