ප්‍රතික්‍රියා වලදී පහත දැක්වෙන දේ කිරීමට මම උත්සාහ කරමි JSX(මෙහි ObjectRow වෙනම අංගයකි):

<tbody>
    for (var i=0; i < numrows; i++) {
        <ObjectRow/>
    } 
</tbody>

ක්‍රියාකාරී ඇමතුම් සඳහා සිතියම් ඇති JSXබැවින් මෙය වලංගු නොවන්නේ මන්දැයි මම තේරුම් ගෙන තේරුම් ගතිමි JSX. කෙසේ වෙතත්, අච්චු භූමියෙන් පැමිණීම සහ නව වීම නිසා JSX, මම ඉහත සඳහන් දෑ සාක්ෂාත් කරගන්නේ කෙසේදැයි මට විශ්වාස නැත (සංරචකයක් කිහිප වතාවක් එකතු කිරීම).

ඔබ ජාවාස්ක්‍රිප්ට් කාර්යයන් අමතන්නාක් මෙන් සිතන්න. forශ්‍රිත ඇමතුමකට තර්ක විතර්ක වන ලූපයක් ඔබට භාවිතා කළ නොහැක :

return tbody(
    for (var i = 0; i < numrows; i++) {
        ObjectRow()
    } 
)

ශ්‍රිතය තර්කයක් ලෙස ලූපයක් tbodyසම්මත කරන්නේ කෙසේදැයි බලන්න for- එය සින්ටැක්ස් දෝෂයකට තුඩු දෙයි.

නමුත් ඔබට අරාවක් සෑදිය හැකිය, පසුව එය තර්කයක් ලෙස සම්මත කරන්න:

var rows = [];
for (var i = 0; i < numrows; i++) {
    rows.push(ObjectRow());
}
return tbody(rows);

JSX සමඟ වැඩ කිරීමේදී ඔබට මූලික වශයෙන් එකම ව්‍යුහයක් භාවිතා කළ හැකිය:

var rows = [];
for (var i = 0; i < numrows; i++) {
    // note: we add a key prop here to allow react to uniquely identify each
    // element in this array. see: https://reactjs.org/docs/lists-and-keys.html
    rows.push(<ObjectRow key={i} />);
}
return <tbody>{rows}</tbody>;

අහම්බෙන්, මගේ JavaScript උදාහරණය හරියටම JSX හි එම උදාහරණය බවට පරිවර්තනය වේ. JSX ක්‍රියා කරන ආකාරය පිළිබඳ හැඟීමක් ලබා ගැනීම සඳහා බාබෙල් REPL සමඟ සෙල්ලම් කරන්න .

මෙය ඔබගේ තත්වය සඳහා සාර්ථක වේදැයි විශ්වාස නැත, නමුත් බොහෝ විට සිතියම හොඳ පිළිතුරකි.

For for loop සමඟ මෙය ඔබේ කේතය නම්:

<tbody>
    for (var i=0; i < objects.length; i++) {
        <ObjectRow obj={objects[i]} key={i}>
    } 
</tbody>

ඔබට සිතියම සමඟ මෙය ලිවිය හැකිය :

<tbody>
    {objects.map(function(object, i){
        return <ObjectRow obj={object} key={i} />;
    })}
</tbody>

ES6 සින්ටැක්ස්:

<tbody>
    {objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>

ඔබට දැනටමත් map()ake FakeRainBrigand ගේ පිළිතුරට කැමති වීමට පෙළක් නොමැති නම්, සහ මෙය පෙළගැස්වීමට අවශ්‍ය නම් ප්‍රභව පිරිසැලසුම ප්‍රතිදානයට අනුරූප වේ @ සොෆී ඇල්පර්ට්ගේ පිළිතුර:

ES2015 (ES6) සින්ටැක්ස් සමඟ (පැතිරීම සහ ඊතල ක්‍රියාකාරිත්වය)

http://plnkr.co/edit/mfqFWODVy8dKQQOkIEGV?p=preview

<tbody>
  {[...Array(10)].map((x, i) =>
    <ObjectRow key={i} />
  )}
</tbody>

Re: බාබෙල් සමඟ සම්ප්‍රේෂණය වන විට, එහි අවවාද පිටුව පවසන්නේ Array.fromඑය පැතිරීම සඳහා අවශ්‍ය බවයි, නමුත් වර්තමානයේදී ( v5.8.23) සත්‍යයක් පැතිරීමේදී එය එසේ නොවන බව පෙනේ Array. එය පැහැදිලි කිරීම සඳහා මා සතුව ප්‍රලේඛන ගැටලුවක් තිබේ. නමුත් ඔබේම අවදානමකින් හෝ පොලිෆිල් භාවිතා කරන්න.

වැනිලා ඊඑස් 5

Array.apply

<tbody>
  {Array.apply(0, Array(10)).map(function (x, i) {
    return <ObjectRow key={i} />;
  })}
</tbody>

පේළිගත IIFE

http://plnkr.co/edit/4kQjdTzd4w69g8Suu2hT?p=preview

<tbody>
  {(function (rows, i, len) {
    while (++i <= len) {
      rows.push(<ObjectRow key={i} />)
    }
    return rows;
  })([], 0, 10)}
</tbody>

වෙනත් පිළිතුරු වලින් ශිල්පීය ක්‍රම ඒකාබද්ධ කිරීම

ප්‍රභව සැකැස්ම ප්‍රතිදානයට අනුරූපව තබා ගන්න, නමුත් ආදාන කොටස වඩාත් සංයුක්ත කරන්න:

render: function () {
  var rows = [], i = 0, len = 10;
  while (++i <= len) rows.push(i);

  return (
    <tbody>
      {rows.map(function (i) {
        return <ObjectRow key={i} index={i} />;
      })}
    </tbody>
  );
}

ES2015 සින්ටැක්ස් සහ Arrayක්‍රම සමඟ

සමග Array.prototype.fillඔබ ඉහත සටහනෙහි දැක්වෙන පරිදි, පැතිරීම භාවිතා විකල්පයක් ලෙස මෙම කරන්න පුළුවන්:

<tbody>
  {Array(10).fill(1).map((el, i) =>
    <ObjectRow key={i} />
  )}
</tbody>

(මම ඇත්තටම ඔයාට ඕනෑම තර්කයක් පළමුෙවන් හිතනවා fill()ඇති පෙර අනුවාදය මගේ වැරැද්ද නිවැරදි කිරීම සඳහා @FakeRainBrigand ස්තුති, නමුත් මම ඒ ගැන 100% ක් නෙමෙයි.) fill()(සංශෝධන බලන්න) විසඳුමක්.

key

සෑම අවස්ථාවකදීම keyattr විසින් සංවර්ධන ගොඩනැගීම සමඟ අනතුරු ඇඟවීමක් සමනය කරයි, නමුත් දරුවාට ප්‍රවේශ විය නොහැක. දරුවා තුළ ඇති දර්ශකය ඔබට අවශ්‍ය නම් ඔබට අතිරේක සහතිකයක් ලබා දිය හැකිය. සාකච්ඡාව සඳහා ලැයිස්තු සහ යතුරු බලන්න .

ES6 සින්ටැක්ස් සමඟ සිතියම් අරා ක්‍රමය භාවිතා කිරීම :

<tbody>
  {items.map(item => <ObjectRow key={item.id} name={item.name} />)} 
</tbody>

keyදේපල අමතක කරන්න එපා .

භාවිතා කිරීම Array සිතියම පුඩුවක් කිරීමට ඉතා සාමාන්ය දෙයක් වන හරහා වේ කාර්යය Array මූලද්රව්ය හා ඒවා අනුව සංරචක නිර්මාණය ප්රතික්රියා , මේ ඔබේ වළළු කරන්න ලස්සන කාර්යක්ෂම හා නිසි පිළිවෙළට මාර්ගය වන, චක්රයක් කරන්න විශාල ක්රමයකි JSX , ඒක එය කිරීමට ඇති එකම මාර්ගය නොව කැමතිම ක්‍රමයයි.

එසේම, අවශ්‍ය පරිදි එක් එක් පුනරාවර්තනය සඳහා අද්විතීය යතුරක් තිබීම අමතක නොකරන්න . සිතියම් ශ්‍රිතය 0 සිට අද්විතීය දර්ශකයක් නිර්මාණය කරයි, නමුත් නිෂ්පාදිත දර්ශකය භාවිතා කිරීම නිර්දේශ නොකරයි, නමුත් ඔබේ අගය අද්විතීය නම් හෝ අද්විතීය යතුරක් තිබේ නම්, ඔබට ඒවා භාවිතා කළ හැකිය:

<tbody>
  {numrows.map(x=> <ObjectRow key={x.id} />)}
</tbody>

අරා හි සිතියම් ක්‍රියාකාරිත්වය ගැන ඔබ නොදන්නේ නම් MDN වෙතින් පේළි කිහිපයක් :

සිතියම මඟින් අරාවෙහි එක් එක් මූලද්‍රව්‍යය සඳහා පිළිවෙලින් සපයන ලද ඇමතුම් ආපසු ගැනීමේ ශ්‍රිතයක් කැඳවන අතර ප්‍රති .ල වලින් නව අරාවක් සාදයි. නැවත කැඳවීම ආයාචනා කරනුයේ නිර්වචනය නොකළ අගයන් ඇතුළුව අගයන් පවරා ඇති අරාවේ දර්ශක සඳහා පමණි. අරාවෙහි නැතිවූ මූලද්‍රව්‍ය සඳහා එය කැඳවනු නොලැබේ (එනම්, කිසි විටෙකත් සකසා නැති, මකාදැමූ හෝ කිසි විටෙක වටිනාකමක් ලබා දී නොමැති දර්ශක).

ඇමතුම් ආපසු ලබා ගැනීම තර්ක තුනකින් සිදු කරයි: මූලද්‍රව්‍යයේ වටිනාකම, මූලද්‍රව්‍යයේ දර්ශකය සහ අරාව වස්තුව ගමන් කරයි.

සිතියමට මෙමආර්ග් පරාමිතියක් සපයා තිබේ නම්, එය මෙම අගය ඇමතුම් සඳහා භාවිතා කරයි. එසේ නොමැති නම්, නිර්වචනය නොකළ අගය මෙම අගය ලෙස භාවිතා කරනු ඇත. ඇමතුමකින් අවසානයේ නිරීක්ෂණය කළ හැකි මෙම අගය ශ්‍රිතයක් මඟින් දකින දේ තීරණය කිරීම සඳහා සුපුරුදු රීති අනුව තීරණය වේ.

සිතියම එය හඳුන්වන අරාව විකෘති නොකරයි (ඇමතුම් ලබා ගැනීම ආයාචනා කළත් එසේ කළ හැක).

ඔබ දැනටමත් භාවිතා කරන්නේ නම් lodash, _.timesකාර්යය පහසුය.

import React, { Component } from "react";
import Select from "./Select";
import _ from "lodash";

export default class App extends Component {
  render() {
    return (
      <div className="container">
        <ol>
          {_.times(3, (i) => (
            <li key={i}>
              <Select onSelect={this.onSelect}>
                <option value="1">bacon</option>
                <option value="2">cheez</option>
              </Select>
            </li>
          ))}
        </ol>
      </div>
    );
  }
}

ඔබට ආපසු වාරණයෙන් පිටත උපුටා ගත හැකිය:

render: function() {
    var rows = [];
    for (var i = 0; i < numrows; i++) {
        rows.push(<ObjectRow key={i}/>);
    } 

    return (<tbody>{rows}</tbody>);
}

මෙය පැරණි නූලක් බව මම දනිමි, නමුත් ඔබට ප්‍රතික්‍රියා ආකෘති පරීක්ෂා කිරීමට අවශ්‍ය විය හැකිය , එමඟින් ප්‍රතික්‍රියා වලදී jsx- ශෛලීය සැකිලි භාවිතා කිරීමට ඔබට ඉඩ සලසයි.

ඔබේ උදාහරණය, ​​ඔබ ප්‍රතික්‍රියා-සැකිලි භාවිතා කළේ නම්:

<tbody>
     <ObjectRow rt-repeat="obj in objects"/>
</tbody>

මෙය සිදු කිරීම සඳහා විවිධ ක්‍රම තිබේ. ජේඑස්එක්ස් අවසානයේ ජාවාස්ක්‍රිප්ට් සමඟ සම්පාදනය වේ, එබැවින් ඔබ වලංගු ජාවාස්ක්‍රිප්ට් ලියන තාක් කල් ඔබ හොඳ වනු ඇත.

මගේ පිළිතුර මෙහි දැනටමත් ඉදිරිපත් කර ඇති අපූරු ක්‍රම සියල්ලම ඒකාබද්ධ කිරීම අරමුණු කරයි:

ඔබට වස්තු සමූහයක් නොමැති නම්, පේළි ගණන:

තුළ returnවාරණ, නිර්මාණය කිරීම Arrayහා භාවිතා Array.prototype.map:

render() {
  return (
    <tbody>
      {Array(numrows).fill(null).map((value, index) => (
        <ObjectRow key={index}>
      ))}
    </tbody>
  );
}

returnබ්ලොක් එකෙන් පිටත , ලූප් සඳහා සාමාන්‍ය ජාවාස්ක්‍රිප්ට් එකක් භාවිතා කරන්න:

render() {
  let rows = [];
  for (let i = 0; i < numrows; i++) {
    rows.push(<ObjectRow key={i}/>);
  } 
  return (
    <tbody>{rows}</tbody>
  );
}

ක්ෂණිකව ආයාචිත ශ්‍රිත ප්‍රකාශනය:

render() {
  return (
    <tbody>
      {() => {
        let rows = [];
        for (let i = 0; i < numrows; i++) {
          rows.push(<ObjectRow key={i}/>);
        }
        return rows;
      }}
    </tbody>
  );
}

ඔබට වස්තු සමූහයක් තිබේ නම්

තුළ returnවාරණ, .map()එය එක් එක් වස්තුව <ObjectRow>සංරචකය:

render() {
  return (
    <tbody>
      {objectRows.map((row, index) => (
        <ObjectRow key={index} data={row} />
      ))}
    </tbody>
  );
}

returnබ්ලොක් එකෙන් පිටත , ලූප් සඳහා සාමාන්‍ය ජාවාස්ක්‍රිප්ට් එකක් භාවිතා කරන්න:

render() {
  let rows = [];
  for (let i = 0; i < objectRows.length; i++) {
    rows.push(<ObjectRow key={i} data={objectRows[i]} />);
  } 
  return (
    <tbody>{rows}</tbody>
  );
}

ක්ෂණිකව ආයාචිත ශ්‍රිත ප්‍රකාශනය:

render() {
  return (
    <tbody>
      {(() => {
        const rows = [];
        for (let i = 0; i < objectRows.length; i++) {
          rows.push(<ObjectRow key={i} data={objectRows[i]} />);
        }
        return rows;
      })()}
    </tbody>
  );
}

numrows යනු අරාව නම්, එය ඉතා සරල ය.

<tbody>
   {numrows.map(item => <ObjectRow />)}
</tbody>

ප්‍රතික්‍රියා වල අරාව දත්ත වර්ගය වඩා හොඳය, අරාව මඟින් නව අරාව පිටුබලය දිය හැකිය, සහ පෙරණයට සහාය වීම, අඩු කිරීම යනාදිය.

mapප්රකාශය භාවිතා කිරීම සඳහා යොමු කරන පිළිතුරු කිහිපයක් තිබේ . මෙන්න තුල iterator භාවිතා සම්පූර්ණ උදාහරණයක් FeatureList ලැයිස්තුවට අංගයක් විශේෂාංගය නමින් JSON දත්ත ව්යුහය මත පදනම් සංරචක ලක්ෂණ .

const FeatureList = ({ features, onClickFeature, onClickLikes }) => (
  <div className="feature-list">
    {features.map(feature =>
      <Feature
        key={feature.id}
        {...feature}
        onClickFeature={() => onClickFeature(feature.id)}
        onClickLikes={() => onClickLikes(feature.id)}
      />
    )}
  </div>
); 

ඔබට සම්පූර්ණ විශේෂාංග ලැයිස්තු කේතය GitHub හි නැරඹිය හැකිය . මෙම සංගම් පිල මෙහි ලැයිස්තුගත කර ඇත ලක්ෂණ .

කිහිප වතාවක්ම ලූප් කර ආපසු යාමට, ඔබට fromසහ map:

<tbody>
  {
    Array.from(Array(i)).map(() => <ObjectRow />)
  }
</tbody>

කොහෙද i = number of times

විදැහුම් කරන ලද සංරචක වලට අද්විතීය යතුරු හැඳුනුම් පත් ලබා දීමට ඔබට අවශ්‍ය නම් React.Children.toArray, ප්‍රතික්‍රියා ලේඛනයේ යෝජනා කර ඇති පරිදි භාවිතා කළ හැකිය

React.Children.toArray

සෑම දරුවෙකුටම පවරා ඇති යතුරු සහිත පැතලි අරාවක් ලෙස ළමයින්ට පාරදෘශ්‍ය දත්ත ව්‍යුහය ලබා දෙයි. ඔබේ විදැහුම්කරණ ක්‍රමවේදයන් තුළ ළමයින්ගේ එකතුව හැසිරවීමට ඔබට අවශ්‍ය නම් ප්‍රයෝජනවත් වේ, විශේෂයෙන් ඔබට එය පසු කිරීමට පෙර මෙය නැවත සකස් කිරීමට හෝ කැපීමට අවශ්‍ය නම්.

සටහන:

React.Children.toArray()ළමුන්ගේ ලැයිස්තු සමතලා කිරීමේදී කූඩු අරා වල අර්ථ නිරූපණය ආරක්ෂා කිරීම සඳහා යතුරු වෙනස් කරයි. එනම්, ටූආරේ විසින් ආපසු ලබා දුන් අරාවෙහි සෑම යතුරක්ම උපසර්ගගත කරයි, එවිට එක් එක් මූලද්‍රව්‍යයේ යතුර එහි අඩංගු ආදාන අරාව වෙත විහිදේ.

<tbody>
  {
    React.Children.toArray(
      Array.from(Array(i)).map(() => <ObjectRow />)
    )
  }
</tbody>

ඔබගේ ප්‍රාන්තයේ අපට අයිතම රාශියක් ඇති බව කියමු:

[{name: "item1", id: 1}, {name: "item2", id: 2}, {name: "item3", id: 3}]

<tbody>
    {this.state.items.map((item) => {
        <ObjectRow key={item.id} name={item.name} />
    })} 
</tbody>

ඔබ මෙම ඇතුලේ බවට පරිවර්තනය කිරීමට ඉවත් නම් ආපසු () ක පිරිනැමිය ක්රමය, පහසුම විකල්පය භාවිතා කරන සිතියම () ක්රමය. පහත දැක්වෙන පරිදි ( ES6 සින්ටැක්ස් භාවිතා වේ ) සිතියම් () ශ්‍රිතය භාවිතයෙන් ඔබේ අරාව JSX සින්ටැක්ස් වෙත සිතියම් ගත කරන්න .

මව් සංරචකය ඇතුළත :

<tbody>
   { objectArray.map(object => <ObjectRow key={object.id} object={object.value}>) }
</tbody>

කරුණාකර keyඔබේ ළමා සංරචකයට එකතු කළ ගුණාංගය සටහන් කරන්න. ඔබ යතුරු ලක්ෂණයක් ලබා නොදුන්නේ නම්, පහත දැක්වෙන අනතුරු ඇඟවීම ඔබේ කොන්සෝලයෙහි දැකිය හැකිය.

අවවාදයයි: අරාවෙහි හෝ අනුකාරකයේ සිටින සෑම දරුවෙකුටම අද්විතීය “යතුරු” මුක්කු තිබිය යුතුය.

සටහන: මිනිසුන් කරන එක් පොදු වැරැද්දක් වන්නේ නැවත ක්‍රියා කිරීමේදී indexයතුරක් ලෙස භාවිතා indexකිරීම, මූලද්‍රව්‍යය යතුරක් ලෙස භාවිතා කිරීම ප්‍රති-රටාවක් වන අතර ඔබට ඒ ගැන වැඩි විස්තර මෙතැනින් කියවිය හැකිය . කෙටියෙන් කිවහොත්, එය ස්ථිතික ලැයිස්තුවක් නොවේ නම් කිසි විටෙක indexයතුරක් ලෙස භාවිතා නොකරන්න .

දැන් ObjectRow සංරචකයේ දී, ඔබට එහි ගුණාංග වලින් වස්තුවට ප්‍රවේශ විය හැකිය.

ObjectRow සංරචකය ඇතුළත

const { object } = this.props

හෝ

const object = this.props.object

මෙය ඔබ මව් සංරචකයේ සිට ObjectRow සංරචකයේ විචල්‍යයට objectලබා දුන් වස්තුව ලබා ගත යුතුය . දැන් ඔබට ඔබේ අරමුණ අනුව එම වස්තුවේ අගයන් කෙළ ගැසිය හැකිය.

යොමුව:

ජාවාස්ක්‍රිප්ට් හි සිතියම () ක්‍රමය

ECMA ස්ක්‍රිප්ට් 6 හෝ ES6

ES2015 / බාබෙල් හැකියාව යනු JSX සමූහයක් නිර්මාණය කිරීම සඳහා උත්පාදක ශ්‍රිතයක් භාවිතා කිරීමයි:

function* jsxLoop(times, callback)
{
    for(var i = 0; i < times; ++i)
        yield callback(i);
}

...

<tbody>
    {[...jsxLoop(numrows, i =>
        <ObjectRow key={i}/>
    )]}
</tbody>

... නැතහොත් ඔබට වස්තු සමූහයක් සකස් කර අපේක්ෂිත ප්‍රතිදානය ලබා ගැනීම සඳහා එය ශ්‍රිතයකට සිතියම් ගත කළ හැකිය. මම මෙයට වැඩි කැමැත්තක් දක්වන්නේ, විදැහුම්කරණය තුළ කිසිදු තර්කනයක් නොමැතිව කේතීකරණයේ හොඳ පුරුද්දක් පවත්වා ගැනීමට එය මට උපකාරී වන බැවිනි.

render() {
const mapItem = [];
for(let i =0;i<item.length;i++) 
  mapItem.push(i);
const singleItem => (item, index) {
 // item the single item in the array 
 // the index of the item in the array
 // can implement any logic here
 return (
  <ObjectRow/>
)

}
  return(
   <tbody>{mapItem.map(singleItem)}</tbody>
  )
}

සරලව භාවිතා .map()ඔබගේ එකතු කිරීම හා නැවත හරහා පුඩුවක් කිරීමට <ObjectRow>මේ අයුරින් සෑම ප්රතිඵලයක්ම සිට මුක්කු සමග භාණ්ඩ.

උපකල්පනය objectsකොහේ හරි අරාවක් ...

<tbody>
  { objects.map((obj, index) => <ObjectRow obj={ obj } key={ index }/> ) }
</tbody>

ES2015 Array.from සිතියම් ශ්‍රිතය + යතුර සමඟ

ඔබට කිසිවක් නොමැති නම්, මූලද්රව්ය පුනරාවර්තනය කිරීම සඳහා ශ්‍රිතය සමඟ .map()භාවිතා කළ හැකිය :Array.from()map

<tbody>
  {Array.from({ length: 5 }, (value, key) => <ObjectRow key={key} />)}
</tbody>

මම මෙය භාවිතා කරමි:

gridItems = this.state.applications.map(app =>
          <ApplicationItem key={app.Id} app={app } />
);

PS: යතුර කවදාවත් අමතක කරන්න එපා, නැත්නම් ඔබට බොහෝ අනතුරු ඇඟවීම් ලැබෙනු ඇත!

ක්‍රමලේඛන තර්කනය ප්‍රතිලාභ අගයෙන් පිටත සිදුවන ප්‍රවේශයකට මම නැඹුරු වෙමි render . මෙය සැබවින්ම විදැහුම්කරණය පහසු දේ තබා ගැනීමට උපකාරී වේ.

ඒ නිසා මම බොහෝ විට එවැනි දෙයක් කරන්නම්:

import _ from 'lodash';

...

const TableBody = ({ objects }) => {
  const objectRows = objects.map(obj => <ObjectRow object={obj} />);      

  return <tbody>{objectRows}</tbody>;
} 

මෙය ඉතා කුඩා කේත ප්‍රමාණයක් බව පිළිගත යුතුය.

අනෙක් පිළිතුරෙන් යෝජනා කළ පරිදි ඔබට .map සමඟ විසඳිය හැකිය. ඔබ දැනටමත් බාබෙල් භාවිතා කරන්නේ නම්, ඔබට jsx-control-statement භාවිතා කිරීම ගැන සිතා බැලිය හැකිය ඒවාට සැකසීම් ටිකක් අවශ්‍ය වේ, නමුත් කියවීමේ හැකියාව අනුව (විශේෂයෙන් ප්‍රතික්‍රියා නොකරන සංවර්ධකයා සඳහා) එය වටී යැයි මම සිතමි. ඔබ ලින්ටරයක් ​​භාවිතා කරන්නේ නම්, එස්ලින්ට්-ප්ලගිනය-ජේඑස්එක්ස්-පාලන-ප්‍රකාශ ද ඇත

ඔබේ JSX කේතය පිරිසිදු ජාවාස්ක්‍රිප්ට් කේතයට සම්පාදනය කරනු ඇත, ඕනෑම ටැග් ReactElementවස්තු මගින් ප්‍රතිස්ථාපනය වේ. ජාවාස්ක්‍රිප්ට් හි, නැවත ලබා දුන් විචල්‍යයන් එකතු කිරීම සඳහා ඔබට ශ්‍රිතයක් කිහිප වතාවක් ඇමතිය නොහැක.

එය නීති විරෝධී ය, එකම ක්‍රමය වන්නේ ශ්‍රිතය ආපසු ලබා දුන් විචල්‍යයන් ගබඩා කිරීම සඳහා අරාවක් භාවිතා කිරීමයි.

නැතහොත් ඔබට ජාවාස්ක්‍රිප්ට් ඊඑස් 5 සිටArray.prototype.map ලබා ගත හැකිය මෙම තත්වය පාලනය කිරීම සඳහා .

කෝණිකng-repeat මෙන් පුනරාවර්තන ශ්‍රිතයක් ක්‍රියාත්මක කිරීම සඳහා නව JSX සින්ටැක්ස් ප්‍රතිනිර්මාණය කිරීම සඳහා අපට වෙනත් සම්පාදකයෙකු ලිවිය හැකිය .

මෙය විවිධ ආකාරවලින් කළ හැකිය.

1. ඉහත යෝජනා කර ඇති පරිදි, returnඅරාවෙහි ඇති සියලුම අංග ගබඩා කිරීමට පෙර

2. ඇතුළත ලූප return

   ක්රමය 1

    let container =[];
       let arr = [1,2,3] //can be anything array, object 
   
       arr.forEach((val,index)=>{
         container.push(<div key={index}>
                        val
                        </div>)
           /** 
           * 1. All loop generated elements require a key 
           * 2. only one parent element can be placed in Array
           * e.g. container.push(<div key={index}>
                                       val
                                 </div>
                                 <div>
                                 this will throw error
                                 </div>  
                               )
           **/   
       });
       return (
         <div>
            <div>any things goes here</div>
            <div>{container}</div>
         </div>
       )

   ක්රමය 2

      return(
        <div>
        <div>any things goes here</div>
        <div>
           {(()=>{
             let container =[];
             let arr = [1,2,3] //can be anything array, object 
             arr.forEach((val,index)=>{
               container.push(<div key={index}>
                              val
                              </div>)
                            });
                       return container;     
           })()}
   
        </div>
     </div>
   )

මෙන්න ඒ සඳහා සරල විසඳුමක්.

var Object_rows = [];
for (var i = 0; i < numrows; i++) {
  Object_rows.push(<ObjectRow />);
}
<tbody>{Object_rows}</tbody>;

සිතියම්ගත කිරීම සහ සංකීර්ණ කේතයක් අවශ්‍ය නොවේ. ඔබට අවශ්‍ය වන්නේ පේළි අරාව වෙතට තල්ලු කර එය විදැහුම් කිරීම සඳහා අගයන් ආපසු ලබා දීමයි.

ඔබ JSX කේතය තුළ ජාවාස්ක්‍රිප්ට් සින්ටැක්ස් ලියන බැවින්, ඔබේ ජාවාස්ක්‍රිප්ට් වක්‍රාකාර වරහන් වලින් ඔතා ගත යුතුය.

row = () => {
   var rows = [];
   for (let i = 0; i<numrows; i++) {
       rows.push(<ObjectRow/>);
   }
   return rows;
}
<tbody>
{this.row()}  
</tbody>

ප්‍රතික්‍රියා ලේඛනයේ නියැදියක් මෙන්න: ළමයින් ලෙස ජාවාස්ක්‍රිප්ට් ප්‍රකාශන

function Item(props) {
  return <li>{props.message}</li>;
}

function TodoList() {
  const todos = ['finish doc', 'submit pr', 'nag dan to review'];
  return (
    <ul>
      {todos.map((message) => <Item key={message} message={message} />)}
    </ul>
  );
}

ඔබේ නඩුව ලෙස, මම මේ ආකාරයෙන් ලිවීමට යෝජනා කරමි:

function render() {
  return (
    <tbody>
      {numrows.map((roe, index) => <ObjectRow key={index} />)}
    </tbody>
  );
}

යතුර ඉතා වැදගත් බව කරුණාවෙන් සලකන්න, මන්ද ප්‍රතික්‍රියා අර්‍ගයේ දත්ත වෙනස් කිරීමට යතුර භාවිතා කරන්න.

මම එය භාවිතා කරනවා වගේ

<tbody>
  { numrows ? (
     numrows.map(obj => { return <ObjectRow /> }) 
    ) : null
  }
</tbody>

ඔබට මෙවැනි දෙයක් කළ හැකිය:

let foo = [1,undefined,3]
{ foo.map(e => !!e ? <Object /> : null )}

නියම ප්‍රශ්නය.

මට නිශ්චිත සංරචක සංඛ්‍යාවක් එක් කිරීමට අවශ්‍ය වූ විට මම කරන්නේ උපකාරක ශ්‍රිතයක් භාවිතා කිරීමයි.

JSX ආපසු ලබා දෙන ශ්‍රිතයක් නිර්වචනය කරන්න:

const myExample = () => {
    let myArray = []
    for(let i = 0; i<5;i++) {
        myArray.push(<MyComponent/>)
    }
    return myArray
}

//... in JSX

<tbody>
    {myExample()}
</tbody>

ඔබට ස්වයං ආයාචනා කිරීමේ කාර්යයක් ද භාවිතා කළ හැකිය:

return <tbody>
           {(() => {
              let row = []
              for (var i = 0; i < numrows; i++) {
                  row.push(<ObjectRow key={i} />)
              }
              return row

           })()}
        </tbody>