Material-ui: [ListItem] rightIconButton：带有自定义IconMenu组件的样式错误

创建于 2016-04-13 · 4评论 · 资料来源: mui-org/material-ui

你好，

首先，感谢您对这个库所做的出色工作；）

使用自定义组件时，我有几个位置错误。这是一个在ListItem.rightIconButton中使用自定义IconMenu的示例：

// With my custom component
<ListItem>
    [...]
    rightIconButton={<CustomComponentListMenu />}
/>

// CustomComponentListMenu.jsx
[...]
render() {
        return (
            <IconMenu iconButtonElement={this.iconButtonElement} >
                <MenuItem onClick={this.onDelete}>Delete</MenuItem>
            </IconMenu>
        );
    }

IconMenu可以正常工作，但是图标菜单的位置不好（请参阅所附的屏幕截图）。

实际上，我认为问题在于样式（位置：绝对，右：4，顶部：12）应用于我的自定义组件标签（<CustomComponentListMenu>），而不是IconMenu标签（<IconMenu>）。
参见ListItem.js：622（https://github.com/callemall/material-ui/blob/master/src/List/ListItem.js#L622），其中_rightIconButtonElement_是我的自定义元素，而不是iconMenu。

我知道这不是一个错误，但是在使用自定义组件时是一个严重的限制（这就是React的全部重点，不是吗？）。

请注意，此“错误”也会与其他组件一起出现，例如ListItem.leftAvatar中的Avatar。

屏幕截图：
screen-bug-mui-listitem

您认为我们可以找到允许自定义组件的解决方案吗？

版本号

材质用户界面：0.15.0
反应：14.7
浏览器：Chrome，Firefox

bug 🐛 List

资料来源

Colmea

👍2

最有用的评论

我只是经历了同样的奇怪行为。深入研究之后，似乎rightIconButton道具需要一个元素，而不是一个组件。尝试将rightIconButton={<CustomComponentListMenu />}更改rightIconButton={(new CustomComponentListMenu).render()} 。对于无状态功能组件，请尝试<Component /> -> Component() 。

（请注意， React.createElement(Component)不起作用；我没有详细调查原因）

我刚开始使用React，我不知道这是否是有意的，但是将rightIconButton设置为组件而不是元素时的错误消息可能是按顺序出现的，而不是因为这种令人困惑的方式而失败。

jlroettger 于 2016-05-19

👍7

所有4条评论

（请注意， React.createElement(Component)不起作用；我没有详细调查原因）

jlroettger 于 2016-05-19

👍7

您要传递...props吗？我对阿凡达有同样的问题。我猜MUI在内部设置了一些道具。

我的自定义头像组件如下所示：

...
const Avatar = (props) => {
  const propsWithoutMember = { ...props };
  delete propsWithoutMember.member;
  return (
    <MUIAvatar {...propsWithoutMember}>{getInitials(props.member)}</MUIAvatar>
  );
};
...

在将其传递给我之前，我必须删除我的自定义属性，否则MUI会抱怨未知的属性。

jonespen 于 2016-09-27

👍2

是的，这只是一个刚开始的错误，只需要传递...props

jlroettger 于 2016-09-29

👍1

我们一直在将该组件移植到v1-beta分支上。我们从头开始重新实现它。尽管我们尚未对其进行测试，但我认为该问题很可能已在该分支上解决。因此，我将其关闭。
尽管如此，在v1-beta接管master分支之前，我们将接受PR修复。

oliviertassinari 于 2017-07-28

此页面是否有帮助？

0 / 5 - 0 等级

Material-ui: [ListItem] rightIconButton：带有自定义IconMenu组件的样式错误

版本号

最有用的评论

所有4条评论

相关问题