Composant ListItem Material-UI pour Right Toggle

Question

Cela semble si basique que je sens que je dois mal comprendre comment cela fonctionne. J'ai un composant démo simple qui rend une liste matérielle-ui avec trois ListItems. Chaque élément de la liste a une bascule sur le côté droit implémenté en utilisant le prop rightToggle. Pour les besoins de la démonstration, chaque bascule est générée différemment.

Le premier est un composant Toggle basique matériel-ui. Le second est un composant personnalisé enveloppant un Toggle et le troisième est généré par un appel de fonction.

Certains code:

import React from 'react'; 
import Paper from 'material-ui/Paper'; 
import { List, ListItem } from 'material-ui/List'; 
import Toggle from 'material-ui/Toggle'; 
import MyToggleComponent from './MyToggleComponent'; 


const myToggleFunction = id => <Toggle onClick={() => console.log(id)} />; 

const TestPage =() => 
    <div> 
     <Paper style={{ width: 500, padding: 15, margin: 25 }}> 
      <List> 
       <ListItem 
        primaryText="This is the first list item" 
        secondaryText="This toggle for this item is directly defined" 
        rightToggle={<Toggle onClick={() => console.log('1 - clicked')} />} 
       /> 
       <ListItem 
        primaryText="This is the second list item" 
        secondaryText="This toggle is generated from a component" 
        rightToggle={<MyToggleComponent text="2 - clicked" />} 
       /> 
       <ListItem 
        primaryText="This is the third list item" 
        secondaryText="This toggle is generated programatically" 
        rightToggle={myToggleFunction('3 - clicked')} 
       /> 
      </List> 
     </Paper> 
    </div>; 

export default TestPage; 

et le composant personnalisé - très basique

import React from 'react'; 
import PropTypes from 'prop-types'; 
import Toggle from 'material-ui/Toggle'; 


const MyToggleComponent = ({ text }) => <Toggle onClick={() => console.log(text)} />; 

MyToggleComponent.propTypes = { 
    text: PropTypes.string.isRequired, 
}; 

export default MyToggleComponent; 

Résultats dans:

Les trois bascules génèrent la sortie de la console attendue. Le premier et le troisième éléments se comportent comme je le ferais avec un Toggle à la droite de l'élément de la liste. Mais la seconde, en utilisant un composant personnalisé, rend le Toggle au-dessus de l'élément de la liste. Quelqu'un peut-il expliquer pourquoi?

Answer 1

Material-UI est cloning ces éléments sous le capot et ajoute/injecter un style prop . Dans le premier et le troisième exemple, les valeurs réelles sont les composants définis par l'interface utilisateur matérielle qui acceptent une propriété style comme document here. Votre propre composant défini ne transmet cependant que la propriété text et ne fait rien avec style.

Il en résulte que tous les 3 exemples reçoivent un accessoire de style mais seulement le premier et le troisième font quelque chose avec. Pour le pire, ce n'était pas bien documenté.

Il ne peu dire qu'il a besoin d'être un élément à bascule et votre propre composant n'est pas une car elle enveloppe le composant à bascule.

pushElement(children, element, baseStyles, additionalProps) { 
    if (element) { 
     const styles = Object.assign({}, baseStyles, element.props.style); 
     children.push(
     React.cloneElement(element, { // element is your own defined component 
      key: children.length, 
      style: styles, // here the style property is passed 
      ...additionalProps, // your text property is passed here 
     }) 
    ); 
    } 
} 

source

Donc pour résoudre ce changement:

const MyToggleComponent = ({ text }) => <Toggle onClick={() => console.log(text)} />; 

à:

const MyToggleComponent = ({ text, style }) => 
<Toggle style={style} onClick={() => console.log(text)} />;