您的问题的原因

Question

材料用户界面版本：v0.20.0

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

CustomAvatar：此组件正在处理某些条件基础，例如，如果图像可用，则

会员/ 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-ui v0库期望leftAvatar prop是Avatar组件而引起的，因此在后台依赖于Avatar的内部值。由于CustomAvatar不是直接Avatar，因此material-ui找不到这些内部结构，因此样式不起作用。

具体来说，如果您查看source of 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

我也面临同样的问题，你可以通过将自定义组件包装到material-ui的PAPER组件中来解决这个问题。请参阅以下代码：

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>}

}

export default withRouter（MemberList）;

使用自定义头像组件

2 个答案:

您的问题的原因

修复它的代码

但是，您应该升级到v1