Question

我想为avatar创建一个包装器，以便在未提供src时将名称的第一个字母呈现为子项。问题是，当我放入ListItem的leftAvatar prop时，它不会在同一行中呈现。

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元素，并在其上添加一个样式，包括position：absolute，left，top等。通过不传播道具（即使用{...props}），或复制{{1你无意中忽略了它。

style

ListItem上的头像src或孩子

1 个答案: