मैं दोहराने वाले तत्वों को कैसे प्रस्तुत कर सकता हूं?

Question 1

मैंने ReactJS में दोहराए जाने वाले तत्वों को प्रस्तुत करने के लिए कुछ कोड लिखे हैं, लेकिन मुझे लगता है कि यह कितना बदसूरत है।

render: function(){
  var titles = this.props.titles.map(function(title) {
    return <th>{title}</th>;
  });
  var rows = this.props.rows.map(function(row) {
    var cells = [];
    for (var i in row) {
      cells.push(<td>{row[i]}</td>);
    }
    return <tr>{cells}</tr>;
  });
  return (
    <table className="MyClassName">
      <thead>
        <tr>{titles}</tr>
      </thead>
      <tbody>{rows}</tbody>
    </table>
  );
}

क्या इसे प्राप्त करने का एक बेहतर तरीका है?

(मैं forटेम्पलेट कोड, या कुछ इसी तरह के दृष्टिकोण के भीतर छोरों को एम्बेड करना चाहूंगा ।)

Question 2

आप ब्रेसिज़ के अंदर भाव रख सकते हैं। संकलित जावास्क्रिप्ट में नोटिस क्यों forजेएसएक्स सिंटैक्स के अंदर एक लूप कभी संभव नहीं होगा; JSX राशियाँ कॉल और सुगर फंक्शन दलीलें करने के लिए। केवल अभिव्यक्ति की अनुमति है।

(इसके अलावा keyछोरों के अंदर प्रदान किए गए घटकों के लिए विशेषताओं को जोड़ना याद रखें ।)

JSX + ES2015 :

render() {
  return (
    <table className="MyClassName">
      <thead>
        <tr>
          {this.props.titles.map(title =>
            <th key={title}>{title}</th>
          )}
        </tr>
      </thead>
      <tbody>
        {this.props.rows.map((row, i) =>
          <tr key={i}>
            {row.map((col, j) =>
              <td key={j}>{col}</td>
            )}
          </tr>
        )}
      </tbody>
    </table>
  );
}

जावास्क्रिप्ट :

render: function() {
  return (
    React.DOM.table({className: "MyClassName"}, 
      React.DOM.thead(null, 
        React.DOM.tr(null, 
          this.props.titles.map(function(title) {
            return React.DOM.th({key: title}, title);
          })
        )
      ), 
      React.DOM.tbody(null, 
        this.props.rows.map(function(row, i) {
          return (
            React.DOM.tr({key: i}, 
              row.map(function(col, j) {
                return React.DOM.td({key: j}, col);
              })
            )
          );
        })
      )
    )
  );
}

Question 3

रॉस एलेन के जवाब पर विस्तार करने के लिए, यहां ES6 तीर सिंटैक्स का उपयोग करके थोड़ा क्लीनर संस्करण है।

{this.props.titles.map(title =>
  <th key={title}>{title}</th>
)}

इसका यह फायदा है कि JSX हिस्सा अलग-थलग (नहीं returnया ;) है, जिससे इसके चारों ओर एक लूप लगाना आसान हो जाता है।

Question 4

चूंकि Array(3)यह एक गैर-पुनरावृत्ति सरणी बनाएगा , इसलिए इसे mapऐरे पद्धति के उपयोग की अनुमति देने के लिए आबाद किया जाना चाहिए । "कन्वर्ट" करने का एक तरीका यह है कि इसे एरे-ब्रैकेट के अंदर नष्ट कर दिया जाए, जो एरे को "भर" कर undefinedदेता है, जैसे किArray(N).fill(undefined)

<table>
    { [...Array(3)].map((_, index) => <tr key={index}/>) }
</table>

एक और तरीका एरे के माध्यम से होगा `fill()`:

<table>
    { Array(3).fill(<tr/>) }
</table>

Is उपरोक्त उदाहरण के साथ समस्या keyप्रोप की कमी है , जो एक जरूरी है ।
(पुनरावर्तक उपयोग कर रहा है indexके रूप में keyअनुशंसित नहीं है)

नेस्टेड नोड्स:

const tableSize = [3,4]
const Table = (
    <table>
        <tbody>
        { [...Array(tableSize[0])].map((tr, trIdx) => 
            <tr key={trIdx}> 
              { [...Array(tableSize[1])].map((a, tdIdx, arr) => 
                  <td key={trIdx + tdIdx}>
                  {arr.length * trIdx + tdIdx + 1}
                  </td>
               )}
            </tr>
        )}
        </tbody>
    </table>
);

ReactDOM.render(Table, document.querySelector('main'))

td{ border:1px solid silver; padding:1em; }

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<main></main>

स्निपेट का विस्तार करें

Question 5

कार्यात्मक प्रोग्रामिंग की भावना में, हम अपने घटकों को अमूर्त का उपयोग करके काम करना थोड़ा आसान बनाते हैं।

// converts components into mappable functions
var mappable = function(component){
  return function(x, i){
    return component({key: i}, x);
  }
}

// maps on 2-dimensional arrays
var map2d = function(m1, m2, xss){
  return xss.map(function(xs, i, arr){
    return m1(xs.map(m2), i, arr);
  });
}

var td = mappable(React.DOM.td);
var tr = mappable(React.DOM.tr);
var th = mappable(React.DOM.th);

अब हम अपने रेंडर को इस तरह परिभाषित कर सकते हैं:

render: function(){
  return (
    <table>
      <thead>{this.props.titles.map(th)}</thead>
      <tbody>{map2d(tr, td, this.props.rows)}</tbody>
    </table>
  );
}

jsbin

हमारे map2d के लिए एक विकल्प एक करीबी नक्शा कार्य होगा, लेकिन लोग करीने से दूर भागते हैं।

Question 6

यह, imo, इसे करने के लिए सबसे सुंदर तरीका है (ES6 के साथ)। एक पंक्ति में 7 अनुक्रमित और मानचित्र के साथ आपको खाली सरणी का संकेत दें:

Array.apply(null, Array(7)).map((i)=>
<Somecomponent/>
)

kudos से https://php.quicoto.com/create-loop-inside-react-jsx/

मैं दोहराने वाले तत्वों को कैसे प्रस्तुत कर सकता हूं?

एक और तरीका एरे के माध्यम से होगा fill():

नेस्टेड नोड्स:

jsbin

एक और तरीका एरे के माध्यम से होगा `fill()`: