頭像src或ListItem上的子元素

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中的錯誤）...

您需要將「style」屬性傳遞到<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> 
    ); 
}