头像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> 
    ); 
}