ListItem 上的头像 src 或 children

Question

我想为头像制作一个包装器，以便在未提供 src 时将名称的第一个字母呈现为 children。问题是当我放入 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

（编辑了我的答案，找到了真正的原因，不是 material-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>
    );
}

ListItem 上的头像 src 或 children

Avatar src or children on ListItem

reactjs

material-ui