Material-ui: [ListItem] rightIconButton：カスタムIconMenuコンポーネントのスタイルバグ
こんにちは、
まず第一に、このライブラリで素晴らしい仕事をしてくれてありがとう;）
カスタムコンポーネントを使用すると、いくつかの位置のバグがあります。これは、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）がIconMenuタグ（<IconMenu>）ではなくカスタムコンポーネントタグ（<CustomComponentListMenu>）に適用されることだと思います。
ListItem.js：622（https://github.com/callemall/material-ui/blob/master/src/List/ListItem.js#L622）を参照してください。ここで、_rightIconButtonElement_は私のカスタム要素であり、iconMenuではありません。
それは実際にはバグではないことは理解していますが、カスタムコンポーネントを使用する場合は重大な制限です（それがReactの要点ですよね？）。
この「バグ」は、ListItem.leftAvatarのAvatarなどの他のコンポーネントでも発生することに注意してください。
スクリーンショット：
カスタムコンポーネントを許可するソリューションを見つけることができると思いますか？
バージョン
素材-UI：0.15.0
反応：14.7
ブラウザ：Chrome、Firefox
Colmea
全てのコメント4件
私はちょうどこれと同じ奇妙な行動を経験しました。 それを掘り下げた後、 rightIconButton小道具はコンポーネントではなく要素を必要としているように見えます。 rightIconButton={<CustomComponentListMenu />}をrightIconButton={(new CustomComponentListMenu).render()}変更してみてください。 ステートレス機能コンポーネントについては、 <Component /> -> Component()試してください。
（ React.createElement(Component)は機能しないことに注意してください。理由については詳細を調べていません）
Reactを使い始めたばかりで、これが意図的なものかどうかはわかりませんが、 rightIconButtonが要素ではなくコンポーネントに設定されている場合、この複雑な方法で失敗するのではなく、エラーメッセージが表示される場合があります。 。
jlroettger
2016年05月19日
...propsを渡しますか？ アバターにも同じ問題がありました。 MUIはいくつかの小道具を内部的に設定していると思います。
私のカスタムアバターコンポーネントは次のようになります。
...
const Avatar = (props) => {
const propsWithoutMember = { ...props };
delete propsWithoutMember.member;
return (
<MUIAvatar {...propsWithoutMember}>{getInitials(props.member)}</MUIAvatar>
);
};
...
カスタムプロップタイプを渡す前に削除する必要がありました。そうしないと、MUIが不明なプロップについて文句を言います。
jonespen
2016年09月27日
ええ、これはReactを始めたばかりの間違いで、 ...propsを渡すだけで済みました。
jlroettger
2016年09月29日
コンポーネントをv1-betaブランチに移植してきまし
それでも、v1-betaがマスターブランチを引き継ぐまで、PR修正を受け入れます。
oliviertassinari
2017年07月28日
関連する問題
iamzhouyi
·
3コメント
revskill10
·
3コメント
zabojad
·
3コメント
anthony-dandrea
·
3コメント
ghost
·
3コメント
最も参考になるコメント
私はちょうどこれと同じ奇妙な行動を経験しました。 それを掘り下げた後、
rightIconButton小道具はコンポーネントではなく要素を必要としているように見えます。rightIconButton={<CustomComponentListMenu />}をrightIconButton={(new CustomComponentListMenu).render()}変更してみてください。 ステートレス機能コンポーネントについては、<Component />->Component()試してください。（
React.createElement(Component)は機能しないことに注意してください。理由については詳細を調べていません）Reactを使い始めたばかりで、これが意図的なものかどうかはわかりませんが、
rightIconButtonが要素ではなくコンポーネントに設定されている場合、この複雑な方法で失敗するのではなく、エラーメッセージが表示される場合があります。 。