Table मैंने नीचे दिए गए कोड का उपयोग करके प्रतिक्रिया में उपरोक्त तालिका को प्रोग्रामिक रूप से बनाया है:

tableRenderer() {

    let table = <Table striped bordered hover responsive="sm" id='mytable'>
        <thead>
        <tr>
            {this.state.headers.map((header, index) =>
                <th key={index}>{header} </th>
            )}
        </tr>
        </thead>

            {this.state.timeLabels.map((label, index)=>
                <tr key={index}>   <td><b>{label} </b></td>
                    {this.state.table.slice(0,4).map((match, index)=>
                        <td key={index}>{match.teamA} vs {match.teamB}</td>
                    )}
                </tr> )}
                </Table>;

हालांकि मैं कार्यक्षमता के आखिरी टुकड़े पर फंस गया हूं जिसकी मुझे आवश्यकता है: मैं टेबल सरणी के टुकड़े के मूल्य को कैसे बदल सकता हूं, इसलिए पहले रन पर यह 0-> पिचों की संख्या, पिचों की दूसरी रन संख्या-> संख्या पिचों की + पिचों की संख्या ... आदि। क्या मुझे कुछ ऐसा फ़ंक्शन बनाने की ज़रूरत है जो हर बार एक पंक्ति बनने पर एक चर को फिर से चालू करे?

0
Luke Egan 13 अप्रैल 2020, 14:00

1 उत्तर

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

यह कुछ की तर्ज पर होगा:

{this.state.timeLabels.map((label, index)=> {
  const NO_OF_PITCHES = 4;
  let from = NO_OF_PITCHES * index;
  let to = NO_OF_PITCHES * (index + 1);

  return <tr key={index}>
    <td><b>{label}</b></td>
    {this.state.table.slice(from,to).map((match, index)=>
      <td key={index}>{match.teamA} vs {match.teamB}</td>
    )}
  </tr>)}
} 

यह मान रहा है कि टुकड़ा करने की क्रिया 0,4... 4,8... 8,12... आदि है

आप मानचित्र फ़ंक्शन के माता-पिता को NO_OF_PITCHES भी उठा सकते हैं क्योंकि इसे प्रत्येक पुनरावृत्ति पर फिर से बनाने की आवश्यकता नहीं है

1
wentjun 13 अप्रैल 2020, 16:43