मेरे पास इस तरह एक प्रतिक्रिया घटक है -

const MyComponent = () => (
    <ContainerSection>
        <DeleteButtonContainer>
            <Button
                theme="plain"
                autoWidth
                onClick={() => {
                    onDeleteClick();
                }}
            >
                Delete
            </Button>
        </DeleteButtonContainer>
    </ContainerSection>
);

मैं केवल DeleteButtonContainer दिखाना चाहता हूं, जब उपयोगकर्ता ContainerSection पर होवर करता है। ये दोनों styled-components हैं। मुझे केवल सीएसएस (बच्चे के अंदर माता-पिता की होवर स्थिति का उपयोग करके) का उपयोग करके ऐसा करने का कोई तरीका नहीं मिला, इसलिए मैंने राज्य का उपयोग करके ऐसा कुछ किया -

const MyComponent = ()=>{
    const [isHoveredState, setHoveredState] = useState<boolean>(false);
    return (<ContainerSection onMouseEnter={() => setHoveredState(true)} onMouseLeave={() => setHoveredState(false)}>
        <DeleteButtonContainer style={{ display: isHoveredState ? 'block' : 'none' }}>
            <Button
                theme="plain"
                autoWidth
                disabled={!isHoveredState}
                onClick={() => {
                    onDeleteClick();
                }}
            >
                Delete
            </Button>
        </DeleteButtonContainer>
    </ContainerSection>)
};

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

तो क्या केवल स्टाइल वाले घटक का उपयोग करके इसे प्राप्त करने का कोई तरीका है और कस्टम जेएस नहीं लिख रहा है?

0
noob 28 अक्टूबर 2019, 15:09

1 उत्तर

सबसे बढ़िया उत्तर

आप एक घटक को दूसरे में संदर्भित कर सकते हैं, और गैर-मोबाइल रिज़ॉल्यूशन के लिए नियम को सक्षम करने के लिए मीडिया क्वेरी का उपयोग कर सकते हैं।

बटन देखने के लिए गोल्डन बार पर होवर करें, और होवर नियम को अक्षम करने के लिए चौड़ाई को छोटा करें।

const DeleteButtonContainer = styled.div``;

const ContainerSection = styled.div`
  height: 2em;
  background: gold;
  
  @media (min-width: 640px) { // when resolution is above 640px
    &:not(:hover) ${DeleteButtonContainer} { // if DeleteButtonContainer is not under an hovered ContainerSection
      display: none;
    }
  }
`;

const Button = styled.button``;

const MyComponent = () => (
<ContainerSection>
  <DeleteButtonContainer>
    <Button>
      Delete
    </Button>
  </DeleteButtonContainer>
</ContainerSection>
);

ReactDOM.render(
  <MyComponent />,
  root
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/4.4.0/styled-components.js"></script>

<div id="root"></div>
3
Ori Drori 28 अक्टूबर 2019, 12:25