2 सवाल: रेंडर प्रॉप्स के साथ प्रतिक्रिया-पॉपर का उपयोग कैसे करें

पर बनाया गया सवाल Thu, Mar 28, 2019 12:00 AM

मैं एक शुरुआती हूं, react-popper को समझने की कोशिश कर रहा हूं। उनके github पर, यह है उदाहरण कोड:

import { Manager, Reference, Popper } from 'react-popper';

const Example = () => (
  <Manager>
    <Reference>
      {({ ref }) => (
        <button type="button" ref={ref}>
          Reference element
        </button>
      )}
    </Reference>
    <Popper placement="right">
      {({ ref, style, placement, arrowProps }) => (
        <div ref={ref} style={style} data-placement={placement}>
          Popper element
          <div ref={arrowProps.ref} style={arrowProps.style} />
        </div>
      )}
    </Popper>
  </Manager>
);

क्या यह है क्योंकि यह वहां खड़ा है काम करने वाला है? मुझे यकीन नहीं है कि मैं समझता हूं कि मैं इस कोड का उपयोग कैसे कर सकता हूं, यह कैसे लगेगा यदि मैं अपने स्वयं के मूल घटक में इस Example घटक का आयात /उपयोग कर रहा हूं; क्या मुझे refs पास करना होगा? ऐसा कैसे? यह बहुत अच्छा होगा अगर कोई मुझे इस कोड का काम करने का उदाहरण दे सकता है, मैं सिर्फ यह देखना चाहता हूं कि इसका उपयोग कैसे किया जाए।

    
0
2 उत्तर                              2                         

रेंडर प्रॉप्स के साथ बहुत ज्यादा परेशान न करें। अधिकांश मामलों में, आपको उन्हें संशोधित करने की आवश्यकता नहीं होगी।

बस ध्यान रखें कि

  • ref से Reference से रेंडर प्रोप संलग्न करना चाहिए संदर्भ तत्व (आपका आइटम जहां आपका पॉपर जुड़ा हुआ है)।
  • ref पॉप अप पर Popper से प्रोप प्रस्तुत करना चाहिए (आपका टूलटिप या जो भी)।
पृष्ठ पर भौगोलिक स्थिति के लिए

style और placement रेंडर प्रोप है।

फिर से शुरू करने पर, यह उदाहरण एक बटन को प्रस्तुत करेगा जिसमें एक तीर से भरा हुआ <div> है, जिसमें "Popper element" है।

    
2
2019-03-28 16: 56: 10Z
  1. नहीं, आपको यह नहीं मिला। यह कोड एक निर्यात के साथ फिर से उपयोग करने योग्य नहीं है। जब आप कुछ अलग करना चाहते हैं तो उसके कंकाल की नकल करें। <div> में, उदाहरण के लिए import Example from './Example.js'; //then in my render: <Example /> के बजाय, अपना संदर्भ तत्व डालें। Reference में, उड़ान पाठ button के बजाय, वह तत्व डालें, जिसे आप अलग करना चाहते हैं।
    2019-03-28 17: 08: 59Z

    मैं अनुमान लगा रहा हूं कि आप टूलटिप जैसी कार्यक्षमता के लिए लक्ष्य रखते हैं। क्या आप इसे हासिल करना चाह रहे हैं?

    ध्यान रखें कि प्रतिक्रिया-पॉपर में निम्न स्तर का एपीआई होता है। यह टूलटिप पुस्तकालय के बजाय एक स्थितिगत इंजन है। इसका उपयोग करके आपको खुद को पॉपर प्रदर्शित करने के तर्क को लागू करना होगा। उदाहरण के लिए आपके पास एक चर 06003509911001001350350 हो सकता है और इस

    में परिवर्तन को ट्रिगर कर सकता है Popper

    यदि आप अधिक उच्च-स्तरीय API चाहते हैं, तो आप प्रतिक्रिया-टिप्पी का उपयोग कर सकते हैं या प्रतिक्रिया-पॉपर-टूलटिप

        
    0
    2019-03-29 11: 04: 42Z
    "Popper element"
स्रोत रखा गया यहाँ