Material-ui: [ListItem] rightIconButton: Stilfehler mit benutzerdefinierter IconMenu-Komponente
Hallo,
Zunächst einmal vielen Dank für Ihre großartige Arbeit an dieser Bibliothek;)
Ich habe mehrere Positionsfehler bei der Verwendung benutzerdefinierter Komponenten. Hier ist ein Beispiel mit einem benutzerdefinierten IconMenu, das in einem ListItem.rightIconButton verwendet wird:
// With my custom component
<ListItem>
[...]
rightIconButton={<CustomComponentListMenu />}
/>
// CustomComponentListMenu.jsx
[...]
render() {
return (
<IconMenu iconButtonElement={this.iconButtonElement} >
<MenuItem onClick={this.onDelete}>Delete</MenuItem>
</IconMenu>
);
}
Das IconMenu funktioniert gut, aber die Position des Symbolmenüs ist nicht gut (siehe beigefügten Screenshot).
Eigentlich denke ich, dass das Problem darin besteht, dass der Stil (Position: absolut, rechts: 4, oben: 12) auf mein benutzerdefiniertes Komponenten-Tag (<CustomComponentListMenu>) und NICHT auf das IconMenu-Tag (<IconMenu>) angewendet wird.
Siehe ListItem.js: 622 (https://github.com/callemall/material-ui/blob/master/src/List/ListItem.js#L622), wobei _rightIconButtonElement_ mein benutzerdefiniertes Element und nicht das iconMenu ist.
Ich verstehe, dass es nicht wirklich ein Fehler ist, aber es ist eine ernsthafte Einschränkung bei der Verwendung von benutzerdefinierten Komponenten (das ist der springende Punkt bei React, nicht wahr?).
Beachten Sie, dass dieser "Fehler" auch bei anderen Komponenten auftritt, z. B. Avatar in ListItem.leftAvatar.
Bildschirmfoto:
Denken Sie, wir können eine Lösung finden, um benutzerdefinierte Komponenten zuzulassen?
Versionen
Material-UI: 0.15.0
Reaktion: 14.7
Browser: Chrome, Firefox
Colmea
Alle 4 Kommentare
Ich habe gerade das seltsame Verhalten erlebt. Nach dem Eingraben scheint es, dass die rightIconButton -Stütze ein Element und keine Komponente haben möchte. Versuchen Sie, rightIconButton={<CustomComponentListMenu />} in rightIconButton={(new CustomComponentListMenu).render()} ändern. Versuchen Sie für zustandslose Funktionskomponenten <Component /> -> Component() .
(Beachten Sie, dass React.createElement(Component) nicht funktioniert; ich habe die Details nicht untersucht, warum)
Ich habe gerade mit React angefangen und weiß nicht, ob dies beabsichtigt ist oder nicht, aber eine Fehlermeldung, wenn rightIconButton auf eine Komponente anstelle eines Elements gesetzt ist, ist möglicherweise in Ordnung, anstatt auf diese verwirrende Weise zu scheitern .
jlroettger
am 19. Mai 2016
Geben Sie ...props ? Ich hatte das gleiche Problem für Avatar. Ich denke, MUI setzt einige Requisiten intern.
Meine benutzerdefinierte Avatar-Komponente sieht folgendermaßen aus:
...
const Avatar = (props) => {
const propsWithoutMember = { ...props };
delete propsWithoutMember.member;
return (
<MUIAvatar {...propsWithoutMember}>{getInitials(props.member)}</MUIAvatar>
);
};
...
Ich musste meine benutzerdefinierten Requisiten entfernen, bevor ich sie weitergab, sonst beschwerte sich MUI über unbekannte Requisiten.
jonespen
am 27. Sept. 2016
Ja, dies war ein Fehler, der gerade erst mit React begann und nur ...props
jlroettger
am 29. Sept. 2016
Wir haben die Komponente auf den v1-beta-Zweig portiert. Wir haben es von Grund auf neu implementiert. Obwohl wir es nicht getestet haben, denke ich, dass das Problem höchstwahrscheinlich in diesem Zweig behoben ist. Daher schließe ich es.
Wir werden jedoch PR-Korrekturen akzeptieren, bis v1-beta den Hauptzweig übernimmt.
oliviertassinari
am 28. Juli 2017
Verwandte Themen
sys13
·
3Kommentare
ghost
·
3Kommentare
revskill10
·
3Kommentare
finaiized
·
3Kommentare
newoga
·
3Kommentare
Hilfreichster Kommentar
Ich habe gerade das seltsame Verhalten erlebt. Nach dem Eingraben scheint es, dass die
rightIconButton-Stütze ein Element und keine Komponente haben möchte. Versuchen Sie,rightIconButton={<CustomComponentListMenu />}inrightIconButton={(new CustomComponentListMenu).render()}ändern. Versuchen Sie für zustandslose Funktionskomponenten<Component />->Component().(Beachten Sie, dass
React.createElement(Component)nicht funktioniert; ich habe die Details nicht untersucht, warum)Ich habe gerade mit React angefangen und weiß nicht, ob dies beabsichtigt ist oder nicht, aber eine Fehlermeldung, wenn
rightIconButtonauf eine Komponente anstelle eines Elements gesetzt ist, ist möglicherweise in Ordnung, anstatt auf diese verwirrende Weise zu scheitern .