Avatar ListItem上のsrcまたはchildren

Question

srcが提供されていない場合、名前の最初の文字を子としてレンダリングするためのラッパーを作りたいと思っています。問題は、ListItemのleftAvatar小道具を置くと、同じ行にレンダリングされないということです。

import React from 'react'; 
import Avatar from 'material-ui/Avatar'; 

export default function UserAvatar(props) { 
    const { 
     size, 
     src, 
     name 
    } = props; 

    return (
     <Avatar 
      size={size || 40} 
      src={src || null} 
     > 
      {src ? null : name.charAt(0)} 
     </Avatar> 
    ); 
} 

UserAvatar.propTypes = { 
    name: React.PropTypes.string.isRequired, 
    size: React.PropTypes.number, 
    src: React.PropTypes.string 
}; 

私はそれをレンダリングしたい：

  import UserAvatar from './UserAvatar'; 
      ... 
      <ListItem 
       primaryText={post.title} 
       secondaryText={post.user.firstName} 
        leftAvatar={<UserAvatar 
        src={post.user.avatar} 
        name={post.user.firstName} 
          /> 
        } 
       leftAvatar={post.user.avatar} 
      /> 

がここに（私は私のラッパーを使用いけないとき）レンダリング予想レンダリング

だ

Answer 1

（材料-UIのバグではない、本当の原因を見つけ、私の答えを編集）...

あなたは<Avatar />上に「スタイル」プロパティを渡す必要があります。 ListItemはleftAvatar要素を複製し、その位置に絶対、左、上などのスタイルを追加しています。小道具を広げないで（{...props}を使用）、またはstyleのプロパティをコピーすると間違って省略されます。

export default function UserAvatar(props) { 
    const { 
     size, 
     src, 
     name, 
     style // <- Need to pull from props, ListItem put it here with React.cloneElement 
    } = props; 

    return (
     <Avatar 
      style={style} // <- Pass it onto the actual material-ui Avatar 
      size={size || 40} 
      src={src || null} 
     > 
      {src ? null : name.charAt(0)} 
     </Avatar> 
    ); 
}