使用自定义阿凡达组件时的材质UI v0 ListItem对齐问题

Question

资料UI版本: v0.20.0

我正试图通过leftAvatar组件分配CustomAvatar值，但正如您在附带的屏幕截图中所看到的那样，它不是对齐的。请帮帮忙。

CustomAvatar：该组件在某些条件下工作，例如如果图像可用，则使用its。

MemberList/index.js

import React, {Component} from 'react';
import {withRouter} from 'react-router-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {List, ListItem} from 'material-ui/List';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import CustomAvatar from 'routes/CustomAvatar';

class MemberList extends Component {
    render(){<MuiThemeProvider> 
        <List>
            <ListItem 
                leftAvatar={<CustomAvatar avatarPic={false}/>}
                primaryText={"Mike Tailor"}
                secondaryText={"This is first text"}
                secondaryTextLines={1}
                rightIconButton={<IconMenu iconButtonElement={iconButtonElement}>
                  <MenuItem>Add friend</MenuItem>
                  <MenuItem>Chat</MenuItem>              
                </IconMenu>}/>

            <ListItem 
                leftAvatar={<CustomAvatar avatarPic={true}/>}
                primaryText={"Kory Becker"}
                secondaryText={"This is second text"}
                secondaryTextLines={1}
                rightIconButton={<IconMenu iconButtonElement={iconButtonElement}>
                  <MenuItem>Add friend</MenuItem>
                  <MenuItem>Chat</MenuItem>              
                </IconMenu>}/>
        </List>
    </MuiThemeProvider>}
}

export default withRouter(MemberList);

CustomAvatar/index.js

import React, {Component} from 'react';
import {withRouter} from 'react-router-dom';
import Avatar from 'material-ui/Avatar';

class CustomAvatar extends Component {
    render(){                               
        if(this.props.avatarPic){           
            return(<Avatar size={40} src={"http://www.example.com/myimage.png"} />) 
        }else{
           return(<Avatar size={40}>A</Avatar>)
        }       
    }
}

export default withRouter(CustomAvatar);

​

​

Answer 1

你问题的原因

造成您的问题是因为material v0库希望leftAvatar支柱是一个Avatar组件，因此依赖于幕后Avatar的内部值。由于您的CustomAvatar不是直接的Avatar，material没有找到这些内部结构，因此样式不起作用。

具体来说，如果您查看ListItem，您将注意到一个pushElement函数，它接受像leftAvatar这样的子组件，并通过设置style支柱来分配样式：

pushElement(children, element, baseStyles, additionalProps) {
  if (element) {
    const styles = Object.assign({}, baseStyles, element.props.style);
    children.push(
      React.cloneElement(element, {
        key: children.length,
        style: styles,
        ...additionalProps,
      })
    );
  }
}

您的CustomAvatar没有使用这个style支柱，所以您从来没有收到必要的CSS样式。这就是你的布局问题的原因。

根据您是否愿意升级到v1，您有几个选项可以解决这个问题。

修复它的代码

class CustomAvatar extends Component {
  render() {
    const { showPicture, ...other } = this.props;

    if (showPicture) {
      return (<Avatar size={40} {...other} src={"http://www.example.com/myimage.png"} />);
    } else {
      return (<Avatar size={40} {...other}>A</Avatar>);
    }
  }
}

如上所述，pushElement函数设置style支柱。现在，您没有使用它，所以您的Avatar没有样式化。{...other}将这个支柱扩展到您的Avatar中，这样它们就可以得到正确的样式和布局。

但是，您应该升级到v1

v1应该会在2018年的早期发布一个稳定的版本，并且它解决了许多这类问题。与其花时间处理这类问题，不如使用v0，您应该升级并学习新的(以及改进的)方法。

Answer 2

我也遇到了同样的问题，您可以通过将您的自定义组件包装到材料-ui的纸组件中来解决这个问题。请参阅下面的代码：

import React, {Component} from 'react';
import {withRouter} from 'react-router-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {List, ListItem} from 'material-ui/List';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import CustomAvatar from 'routes/CustomAvatar';
import Paper from 'material-ui/Paper';


class MemberList extends Component {
    render(){<MuiThemeProvider> 
    <List>
        <ListItem 
            leftAvatar={<Paper zDepth={2} circle={true}><CustomAvatar avatarPic={false}/></Paper>}
            primaryText={"Mike Tailor"}
            secondaryText={"This is first text"}
            secondaryTextLines={1}
            rightIconButton={<IconMenu iconButtonElement={iconButtonElement}>
              <MenuItem>Add friend</MenuItem>
              <MenuItem>Chat</MenuItem>              
            </IconMenu>}/>

        <ListItem 
            leftAvatar={<Paper zDepth={2} circle={true}><CustomAvatar avatarPic={true}/></Paper>}
            primaryText={"Kory Becker"}
            secondaryText={"This is second text"}
            secondaryTextLines={1}
            rightIconButton={<IconMenu iconButtonElement={iconButtonElement}>
              <MenuItem>Add friend</MenuItem>
              <MenuItem>Chat</MenuItem>              
            </IconMenu>}/>
    </List>
</MuiThemeProvider>}

}

导出默认withRouter(MemberList)；