मेरे पास वेब पेज पर डेटा दिखाने के लिए ऑब्जेक्ट्स की एक सरणी है और सभी div को सरणी ऑब्जेक्ट (इस क्रम में) में कुंजी के अनुसार होना चाहिए।

var priceSize = <div>HTML goes here</div>
var agentDetails = <div>HTML goes here</div>
var mappedHouses = <div>HTML goes here</div>
var sideComps = <div>HTML goes here</div>
var priceDays = <div>HTML goes here</div>

render() {
 return (
 report_sequence.map((data) => 
 <div className={data.key}>
  {
   data.key === 1 ? subjectProperty : 
   data.key === 2 ? priceSize : 
   data.key === 4 ? priceDays : 
   data.key === 5 ? sideComps : 
   data.key === 6 ? mappedHouses : 
   data.key === 9 ? agentDetails : ''
  }
 </div>
 )
 );
}

यह मेरी सरणी है:

var report_sequence = [
    {key : 1, value : "SUBJECT PROPERTY OVERVIEW"},
    {key : 2, value : "PRICE & SIZE GRAPH"},
    {key : 9, value : "AGENT SUMMARY"},
    {key : 4, value : "PRICE & DAYS ON MARKET GRAPH"},
    {key : 6, value : "MAPPED HOUSES"},
    {key : 5, value : "SIDE BY SIDE COMPARISION"}
   ]

मैं अपने रिपोर्ट अनुक्रम के अनुसार div व्यवस्था की अपेक्षा करता हूं। कृपया उसी के लिए मदद करें।

3
Parvez 5 सितंबर 2019, 11:37

3 जवाब

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

गतिशील डेटा प्रतिपादन के लिए दोनों दृष्टिकोण ठीक काम करेंगे।

    return (
     report_sequence.map((data) => 
     <div className={data.key}>
      {
       data.key === 1 ? subjectProperty : 
       data.key === 2 ? priceSize : 
       data.key === 4 ? priceDays : 
       data.key === 5 ? sideComps : 
       data.key === 6 ? mappedHouses : 
       data.key === 9 ? agentDetails : ''
      }
     </div>
     )

//Second approach using switch according to Dacre Denny

   const renderItem = (key) => {
      switch(key) {
        case 1: return subjectProperty;
        case 2: return priceSize;
        case 4: return priceDays;
        case 5: return sideComps;
        case 6: return mappedHouses;
        case 9: return agentDetails;
        default: return null;
      }

   }
0
Deeksha gupta 5 सितंबर 2019, 13:08

आपके <div> घटक संग्रह (यानी priceSize, agentDetails, आदि) के HTML को गतिशील रूप से प्रस्तुत करने का एक सरल समाधान switch कथन के माध्यम से होगा।

सबसे पहले, सुनिश्चित करें कि आपका HTML एक मान्य घटक (अर्थात प्रमुख पूंजीकरण) के रूप में परिभाषित है:

var SubjectProperty = <div>HTML goes here</div>
var PriceSize = <div>HTML goes here</div>
var AgentDetails = <div>HTML goes here</div>
var MappedHouses = <div>HTML goes here</div>
var SideComps = <div>HTML goes here</div>
var PriceDays = <div>HTML goes here</div>

इसके बाद, उस घटक को अपडेट करें जो report_sequence सरणी प्रस्तुत करता है। ऊपर वर्णित switch विचार को पेश करने का एक तरीका स्थानीय रूप से परिभाषित विधि के माध्यम से होगा:

render() {

    /* Define a local helper that renders the component corresponding to
    a specific key  */
    const renderItem = (key) => {

      switch(key) {
        case 1: return <SubjectProperty/>;
        case 2: return <PriceSize/>;
        case 4: return <PriceDays/>;
        case 5: return <SideComps/>;
        case 6: return <MappedHouses/>;
        case 9: return <AgentDetails/>;
      }

      return null;
   }

   /* Invoke locally defined renderItem() method to dynamically render
   each list item based on item's key */
   return report_sequence.map((data) => 
       <div key={data.key} className={data.key}>
       { renderItem(data.key) }
       </div>)
} 
0
Dacre Denny 5 सितंबर 2019, 12:11

यहां आपके पास आपके घटक मॉक हैं:

var PriceSize = <div>HTML goes here</div>
var AgentDetails = <div>HTML goes here</div>
var MappedHouses = <div>HTML goes here</div>
var SideComps = <div>HTML goes here</div>
var PriceDays = <div>HTML goes here</div>

यहाँ नक्शा उचित घटक प्रस्तुत करेगा

const componentMap = {
  [1]: () => <PriceSize />
  [2]: () => <AgentDetails /> 
  [3]: () => <MappedHouses /> 
  [4]: () => <SideComps /> 
  [5]: () => <PriceDays /> 
}

और यहां आपके पास अपना रेंडर फ़ंक्शन है और:

  • जब आपके रेंडर घटकों को गतिशील रूप से आपको जोड़ने की आवश्यकता होती है key संपत्ति उन्हें किसी तरह प्रतिक्रिया द्वारा पहचानने की अनुमति देती है, तो मैंने मान लिया कि आपके पास इस डेटा सेट में आईडी जैसी कुछ संपत्ति है (सूचकांक या कुछ भी अद्वितीय हो सकता है)
  • मैंने मान लिया कि मैप किए गए डेटा सेट में टाइप जैसा कुछ है जो उचित घटक को प्रस्तुत करने की अनुमति देता है,
  • घुंघराले कोष्ठक में मैं जाँच कर रहा हूँ कि क्या मानचित्र में दिए गए key के लिए कुछ value हैं और यदि यह है तो मैं इसे कॉल करता हूँ।

कोड:

render() {
      report_sequence.map((data) => 
        return (
          <div className={data.key} key={data.id}>
            {this.componentMap[data.type] && this.componentMap[data.type]()}
          </div>
        );
      )
    }
0
Bartosz 5 सितंबर 2019, 11:58