Material-ui: [ListItem] rightIconButton: कस्टम IconMenu घटक के साथ स्टाइल बग

को निर्मित 13 अप्रैल 2016 · 4टिप्पणियाँ · स्रोत: mui-org/material-ui

नमस्ते,

सबसे पहले, आप इस पुस्तकालय पर भयानक काम के लिए धन्यवाद;)

कस्टम घटकों का उपयोग करते समय मेरे पास कई पोज़ीशन बग हैं। यहाँ एक लिस्ट के साथ एक उदाहरण दिया गया है।

// 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.leftAvatar में अवतार।

स्क्रीनशॉट:
screen-bug-mui-listitem

क्या आपको लगता है कि हम कस्टम घटक को अनुमति देने के लिए एक समाधान पा सकते हैं?

संस्करणों

सामग्री-यूआई: 0.15.0
प्रतिक्रिया: 14.7
ब्राउज़र: क्रोम, फ़ायरफ़ॉक्स

bug 🐛 List

स्रोत

Colmea

👍2

सबसे उपयोगी टिप्पणी

मैंने बस इसी अजीब व्यवहार का अनुभव किया। इसमें खुदाई करने के बाद, ऐसा लगेगा कि rightIconButton प्रोप एक तत्व चाहता है, घटक नहीं। rightIconButton={<CustomComponentListMenu />} से rightIconButton={(new CustomComponentListMenu).render()} बदलने का प्रयास करें। स्टेटलेस फ़ंक्शनल घटकों के लिए, <Component /> -> Component() ।

(ध्यान दें कि React.createElement(Component) काम नहीं करता है; मैंने विवरणों में ऐसा क्यों नहीं देखा है)

मैंने अभी रिएक्ट का उपयोग शुरू किया है और मुझे नहीं पता कि यह जानबूझकर है या नहीं, लेकिन एक त्रुटि संदेश जब rightIconButton एक तत्व के बजाय एक घटक के लिए सेट किया जाता है, तो इस खराब तरीके से विफल होने के बजाय आदेश में हो सकता है ।

jlroettger 19 मई 2016

👍7

सभी 4 टिप्पणियाँ

jlroettger 19 मई 2016

👍7

क्या आप ...props नीचे से गुजर रहे हैं? मुझे अवतार के लिए भी यही समस्या थी। मुझे लगता है कि MUI आंतरिक रूप से कुछ प्रॉप्स सेट करता है।

मेरा कस्टम अवतार घटक इस तरह दिखता है:

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

मुझे अपने कस्टम प्रोपेप्टिस को नीचे पारित करने से पहले हटाना पड़ा, अन्यथा एमयूआई अज्ञात प्रॉप्स के बारे में शिकायत करता।

jonespen 27 सित॰ 2016

👍2

हाँ, यह एक प्रारंभिक-से-बाहर-प्रतिक्रिया प्रतिक्रिया थी, केवल ...props पास करने की आवश्यकता थी

jlroettger 29 सित॰ 2016

👍1

हम घटक को v1- बीटा शाखा पर पोर्ट कर रहे हैं। हमने इसे जमीनी स्तर से फिर से लागू किया। जबकि हमने इसका परीक्षण नहीं किया है, मुझे लगता है कि यह समस्या उस शाखा पर सबसे अधिक निश्चित है। इसलिए, मैं इसे बंद कर रहा हूं।
फिर भी, हम PR फ़िक्सेस को तब तक स्वीकार करेंगे जब तक कि v1-बीटा मास्टर ब्रांच पर नहीं ले जाता है।

oliviertassinari 28 जुल॰ 2017

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Material-ui: [ListItem] rightIconButton: कस्टम IconMenu घटक के साथ स्टाइल बग

संस्करणों

सबसे उपयोगी टिप्पणी

सभी 4 टिप्पणियाँ

संबंधित मुद्दों