Material-ui: [ListItem] rightIconButton: bug de style avec le composant IconMenu personnalisé

Créé le 13 avr. 2016 · 4Commentaires · Source: mui-org/material-ui

Bonjour,

Tout d'abord, merci pour votre excellent travail sur cette bibliothèque;)

J'ai plusieurs bogues de position lors de l'utilisation de composants personnalisés Voici un exemple avec un IconMenu personnalisé utilisé dans un ListItem.rightIconButton:

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

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

L'IconMenu fonctionne bien, mais la position du menu d'icônes n'est pas bonne (voir capture d'écran ci-jointe).

En fait, je pense que le problème est que le style (position: absolue, droite: 4, haut: 12) est appliqué à ma balise de composant personnalisé (<CustomComponentListMenu>) et PAS à la balise IconMenu (<IconMenu>).
Voir ListItem.js: 622 (https://github.com/callemall/material-ui/blob/master/src/List/ListItem.js#L622) où _rightIconButtonElement_ est mon élément personnalisé et non le iconMenu.

Je comprends que ce n'est pas vraiment un bogue, mais c'est une limitation sérieuse lors de l'utilisation de composants personnalisés (c'est tout l'intérêt de React, n'est-ce pas?).

Notez que ce "bug" apparaît également avec d'autres composants, comme Avatar dans ListItem.leftAvatar.

Capture d'écran:
screen-bug-mui-listitem

Pensez-vous que nous pouvons trouver une solution pour autoriser les composants personnalisés?

Versions

Matériel-UI: 0.15.0
Réagir: 14,7
Navigateur: Chrome, Firefox

bug 🐛 List

Source

Colmea

👍2

Commentaire le plus utile

Je viens de vivre ce même comportement étrange. Après l'avoir creusé, il semblerait que le prop rightIconButton veuille un élément, pas un composant. Essayez de remplacer rightIconButton={<CustomComponentListMenu />} par rightIconButton={(new CustomComponentListMenu).render()} . Pour les composants fonctionnels sans état, essayez <Component /> -> Component() .

(Notez que React.createElement(Component) ne fonctionne pas; je n'ai pas examiné les détails pour savoir pourquoi)

Je viens de commencer à utiliser React et je ne sais pas si c'est intentionnel ou non, mais un message d'erreur lorsque rightIconButton est défini sur un composant au lieu d'un élément peut être dans l'ordre, au lieu d'échouer de cette manière déroutante .

jlroettger le 19 mai 2016

👍7

Tous les 4 commentaires

(Notez que React.createElement(Component) ne fonctionne pas; je n'ai pas examiné les détails pour savoir pourquoi)

jlroettger le 19 mai 2016

👍7

Passez-vous ...props ? J'ai eu le même problème pour Avatar. Je suppose que MUI met en place des accessoires en interne.

Mon composant Avatar personnalisé ressemble à ceci:

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

J'ai dû supprimer mes proptypes personnalisés avant de les transmettre, sinon MUI se plaindrait d'accessoires inconnus.

jonespen le 27 sept. 2016

👍2

Ouais, c'était une erreur qui ne faisait que commencer avec React, seulement nécessaire pour passer ...props

jlroettger le 29 sept. 2016

👍1

Nous avons porté le composant sur la branche v1-beta . Nous l'avons réimplémenté à partir de zéro. Bien que nous ne l'ayons pas testé, je pense que le problème est probablement résolu sur cette branche. Par conséquent, je le ferme.
Néanmoins, nous accepterons les correctifs PR jusqu'à ce que la v1-beta reprenne la branche principale.