Material-ui: [ListItem] rightIconButton: bug gaya dengan komponen IconMenu kustom

Dibuat pada 13 Apr 2016 · 4Komentar · Sumber: mui-org/material-ui

Halo,

Pertama-tama, terima kasih atas pekerjaan Anda yang luar biasa di perpustakaan ini;)

Saya memiliki beberapa bug posisi saat menggunakan komponen khusus. Berikut adalah contoh dengan IconMenu khusus yang digunakan dalam ListItem.rightIconButton:

// With my custom component
<ListItem>
    [...]
    rightIconButton={<CustomComponentListMenu />}
/>

// CustomComponentListMenu.jsx
[...]
render() {
        return (
            <IconMenu iconButtonElement={this.iconButtonElement} >
                <MenuItem onClick={this.onDelete}>Delete</MenuItem>
            </IconMenu>
        );
    }

IconMenu berfungsi dengan baik, tetapi posisi menu ikon tidak baik (lihat tangkapan layar terlampir).

Sebenarnya, menurut saya masalahnya adalah gaya (position: absolute, right: 4, top: 12) diterapkan ke tag komponen kustom saya (<CustomComponentListMenu>) dan BUKAN tag IconMenu (<IconMenu>).
Lihat ListItem.js: 622 (https://github.com/callemall/material-ui/blob/master/src/List/ListItem.js#L622) di mana _rightIconButtonElement_ adalah elemen khusus saya dan bukan iconMenu.

Saya mengerti ini sebenarnya bukan bug, tetapi ini adalah batasan serius saat menggunakan komponen kustom (itulah inti dari React, bukan?).

Perhatikan bahwa "bug" ini juga muncul dengan komponen lain, seperti Avatar di ListItem.leftAvatar.

Tangkapan layar:
screen-bug-mui-listitem

Menurut Anda, apakah kami dapat menemukan solusi untuk mengizinkan komponen kustom?

Versi

Bahan-UI: 0.15.0
Bereaksi: 14.7
Browser: Chrome, Firefox

bug 🐛 List

Sumber

Colmea

👍2

Komentar yang paling membantu

Saya baru saja mengalami perilaku aneh yang sama. Setelah menggali lebih dalam, akan terlihat bahwa rightIconButton prop menginginkan sebuah elemen, bukan sebuah komponen. Coba ubah rightIconButton={<CustomComponentListMenu />} menjadi rightIconButton={(new CustomComponentListMenu).render()} . Untuk komponen fungsional stateless, coba <Component /> -> Component() .

(Perhatikan bahwa React.createElement(Component) tidak berfungsi; Saya belum melihat detailnya mengapa)

Saya baru saja mulai menggunakan React dan saya tidak tahu apakah ini disengaja atau tidak, tetapi pesan kesalahan ketika rightIconButton disetel ke komponen alih-alih elemen mungkin berurutan, alih-alih gagal dengan cara yang membingungkan ini .

jlroettger pada 19 Mei 2016

👍7

Semua 4 komentar

(Perhatikan bahwa React.createElement(Component) tidak berfungsi; Saya belum melihat detailnya mengapa)

jlroettger pada 19 Mei 2016

👍7

Apakah Anda mengirimkan ...props ? Saya memiliki masalah yang sama dengan Avatar. Saya kira MUI menetapkan beberapa alat peraga secara internal.

Komponen Avatar khusus saya terlihat seperti ini:

...
const Avatar = (props) => {
  const propsWithoutMember = { ...props };
  delete propsWithoutMember.member;
  return (
    <MUIAvatar {...propsWithoutMember}>{getInitials(props.member)}</MUIAvatar>
  );
};
...

Saya harus menghapus proptipe khusus saya sebelum meneruskannya, jika tidak MUI akan mengeluh tentang alat peraga yang tidak dikenal.

jonespen pada 27 Sep 2016

👍2

Ya, ini adalah kesalahan baru saja memulai dengan React, hanya perlu melewati ...props

jlroettger pada 29 Sep 2016

👍1

Kami telah mem-port komponen di cabang v1-beta . Kami menerapkannya kembali dari bawah ke atas. Meskipun kami belum mengujinya, saya pikir masalahnya kemungkinan besar sudah diperbaiki di cabang itu. Oleh karena itu, saya menutupnya.
Namun, kami akan menerima perbaikan PR sampai v1-beta mengambil alih cabang master.