अपने प्रतिभागियों के साथ घटनाओं का यह उद्देश्य रखना:

const myData = {
  "event_1": ["1", "2","3"],
  "event_2": ["11", "5","8", "9"],
  "event_3": ["1", "2","5"],
  "event_4": ["1", "2"],
  "event_5": ["6", "7","8"],
  "event_8": ["1", "6","9"]
}

प्रत्येक संख्या एक प्रतिभागी का प्रतिनिधित्व करती है।

उदाहरण के लिए, event_3 में 1, 2 और 5 आईडी वाले लोग भाग ले रहे थे।

मैं इस तरह एक यूजर इंटरफेस बनाना चाहता हूं:

enter image description here

प्रत्येक घटना के लिए एक पंक्ति मौजूद होनी चाहिए और उस पंक्ति के अंदर प्रत्येक प्रतिभागी के लिए एक तत्व (एक वर्ग की तरह) होना चाहिए। वर्गों को क्लिक करने योग्य होना चाहिए जैसे localhost:3000/participant_id पर रीडायरेक्ट करना।

यदि स्क्रीन पर साझा करने की तुलना में पंक्ति पर अधिक तत्व हैं तो क्षैतिज रूप से स्क्रॉल करने में सक्षम होना चाहिए।

साथ ही, पंक्तियों की एक निश्चित संख्या से अधिक होने पर लंबवत स्क्रॉल करने में सक्षम होना।

मुझे पता है कि यह इस वेबसाइट पर एक सामान्य प्रश्न नहीं है, मैं जानना चाहता हूं कि क्या यह करना संभव है (शायद सामग्री यूआई या सिमेंटिक यूआई के साथ) क्योंकि मैंने थोड़ा शोध किया है और मेरी मदद करने के लिए कुछ नहीं मिला।

क्या आपके पास प्रतिक्रिया में ऐसा कुछ बनाने के बारे में कोई विचार है?

0
Leo Messi 16 जुलाई 2020, 19:37

1 उत्तर

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

मैं react-virtualized जैसी लाइब्रेरी का उपयोग करने की सलाह देता हूं (या आपके उद्देश्य के लिए) मैं नए संस्करण react-window का उपयोग करूंगा। इसमें सभी प्रकार की परियोजनाओं के लिए बहुत अच्छा प्रलेखन और बहुत सारे उदाहरण हैं।

एक यदि मुख्य कारण मैं इसका सुझाव देता हूं, क्योंकि यदि आपके पास स्क्रॉल कंटेनर में बहुत सारे तत्व हैं, तो प्रतिक्रिया-वर्चुअलाइज्ड केवल उपयोगकर्ता को दिखाई देने वाले तत्वों को प्रस्तुत करके प्रदर्शन को अनुकूलित करेगा, इसलिए डोम पेड़ के आकार को कम करना।

एक नकारात्मक पहलू जिसका आपको सामना करना पड़ सकता है, यदि तत्व का डोम ट्री बहुत बड़ा है और इसमें छवियां हैं, तो यह 60fps के साथ नहीं चल सकता है, क्योंकि लाइब्रेरी रेंडरिंग से ठीक पहले तत्व को मापने का प्रयास करेगी। (ऐसा इसलिए होता है कि यह छवियों के लोड होने की प्रतीक्षा कर सकता है और फिर तत्व को मापने के लिए एक फ़ंक्शन को कॉल कर सकता है और उसके बाद ही इसे प्रस्तुत कर सकता है)।

यदि आप ऐसा कुछ नहीं करना चाहते हैं, तो मैं आपको सिमेंटिक-यूआई द्वारा दिए गए विकल्पों का उपयोग करने का सुझाव दूंगा। इस उदाहरण पर एक नज़र डालें (स्क्रॉल करने योग्य तालिका) और यह घटक है।

*ध्यान दें, यदि आप पहला दृष्टिकोण अपनाने के इच्छुक हैं, तो आपको अपने स्वयं के प्रोजेक्ट के साथ प्रयोग करने से पहले उनके दस्तावेज़ों पर कुछ और पढ़ना होगा।

शुभकामनाएँ <3

1
Нова Пейка Истинска 18 जुलाई 2020, 07:28