अगले कार्य कोड के आधार पर:

var myfields = new Array('id', 'firstName', 'lastName')

const usersd = users;   


ReactDOM.render(
<BootstrapTable data={usersd} search={true} cellEdit={ cellEditProp } height='480px' scrollTop={ 'Bottom' } pagination={true}  multiColumnSearch={ true } >
    <TableHeaderColumn isKey dataField={myfields[0]} width='10' dataAlign='left'>{myfields[0]}</TableHeaderColumn>
    <TableHeaderColumn dataField={myfields[1]} dataSort={ true } width='15' dataAlign='left' headerAlign='left'>{myfields[1]}</TableHeaderColumn>
    <TableHeaderColumn dataField={myfields[2]} dataSort={ true }  width='15' dataAlign='left' headerAlign='left'>{myfields[2]}</TableHeaderColumn>
</BootstrapTable>,
document.getElementById('usersModTable')
);

मैं उन प्रतिक्रिया आदेशों पर एक लूप का उपयोग करना चाहता था जो एक अनुक्रमणिका का उपयोग करते हैं। तो मैं एक लूप का उपयोग कर सकता था जैसे:

var myfields = new Array('id', 'firstName', 'lastName')

const usersd = users;



ReactDOM.render(
<BootstrapTable data={usersd} search={true} cellEdit={ cellEditProp } height='480px' scrollTop={ 'Bottom' } pagination={true}  multiColumnSearch={ true } >
    <TableHeaderColumn isKey dataField={myfields[0]} width='10' dataAlign='left'>{myfields[0]}</TableHeaderColumn>

    for(var i = 1;i<myfields.length;i++) {
        <TableHeaderColumn dataField={myfields[i]} dataSort={ true } width='15' dataAlign='left' headerAlign='left'>{myfields[i]}</TableHeaderColumn>           
    }

</BootstrapTable>, document.getElementById('usersModTable')
);

अभी तक यह लूप काम नहीं करता है, लेकिन क्या ऐसा कुछ करने का कोई तरीका है?

2
Jose Cabrera Zuniga 19 अप्रैल 2017, 21:29

4 जवाब

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

मयंक शुक्ला द्वारा प्रस्तावित कोड आप जो चाहते हैं उसे प्राप्त करने का एक सुंदर तरीका है (मैं इसे उसी तरह से करूंगा)। लेकिन अगर आप जो खोज रहे हैं वह लूप का उपयोग करना है, तो तरीका इस तरह कम या ज्यादा होना चाहिए:

var myfields = new Array('id', 'firstName', 'lastName')

const usersd = users;

let components = [];
for(var i = 1;i<myfields.length;i++) {
    components.push(<TableHeaderColumn dataField={myfields[i]} dataSort={ true } width='15' dataAlign='left' headerAlign='left'>{myfields[i]}</TableHeaderColumn>);
}

ReactDOM.render(
<BootstrapTable data={usersd} search={true} cellEdit={ cellEditProp } height='480px' scrollTop={ 'Bottom' } pagination={true}  multiColumnSearch={ true } >
    <TableHeaderColumn isKey dataField={myfields[0]} width='10' dataAlign='left'>{myfields[0]}</TableHeaderColumn>
    //for(var i = 1;i<myfields.length;i++) {
    //  <TableHeaderColumn dataField={myfields[i]} dataSort={ true } width='15' dataAlign='left' headerAlign='left'>{myfields[i]}</TableHeaderColumn>;
    //}
    {components}
</BootstrapTable>, document.getElementById('usersModTable')
);

या

var myfields = new Array('id', 'firstName', 'lastName')

const usersd = users;

ReactDOM.render(
<BootstrapTable data={usersd} search={true} cellEdit={ cellEditProp } height='480px' scrollTop={ 'Bottom' } pagination={true}  multiColumnSearch={ true } >
    <TableHeaderColumn isKey dataField={myfields[0]} width='10' dataAlign='left'>{myfields[0]}</TableHeaderColumn>
    {
        let components = [];
        for(var i = 1;i<myfields.length;i++) {
            components.push(<TableHeaderColumn dataField={myfields[i]} dataSort={ true } width='15' dataAlign='left' headerAlign='left'>{myfields[i]}</TableHeaderColumn>);
        }
        return components;
    }
</BootstrapTable>, document.getElementById('usersModTable')
);
1
Facundo La Rocca 19 अप्रैल 2017, 21:39

पहली बात यह है कि आप {} का उपयोग करना भूल गए हैं, यदि आप html तत्व के अंदर किसी भी js कोड का उपयोग कर रहे हैं तो आपको {} का उपयोग करने की आवश्यकता है।

आप loop का गलत तरीके से उपयोग कर रहे हैं, for लूप return कुछ भी नहीं करेगा, इसका उपयोग केवल array को पुनरावृत्त करने के लिए किया जाता है। इसके लिए map का प्रयोग करें, यह प्रत्येक तत्व के लिए TableHeaderColumn लौटाएगा। ऐशे ही:

ReactDOM.render(
    <BootstrapTable data={usersd} search={true} cellEdit={ cellEditProp } height='480px' scrollTop={ 'Bottom' } pagination={true}  multiColumnSearch={ true } >
        <TableHeaderColumn isKey dataField={myfields[0]} width='10' dataAlign='left'>{myfields[0]}</TableHeaderColumn>

       {
          myfields.map((el, i) => <TableHeaderColumn
                                      key={i} 
                                      dataField={el}  
                                      dataSort={ true } 
                                      width='15' 
                                      dataAlign='left' 
                                      headerAlign='left'>
                                      {el}
                                  </TableHeaderColumn> 

       }

   </BootstrapTable>, document.getElementById('usersModTable'));

इस उदाहरण को देखें, map का उपयोग jsx के अंदर कैसे करें:

var App = () => {
   return (
      <div>
          {
            [1,2,3,4].map(el => <p key={el} > {el} </p>)
          }
      </div>
   )
}

ReactDOM.render(<App/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>
3
Mayank Shukla 19 अप्रैल 2017, 21:52
क्या कोड को मानचित्र फ़ंक्शन का परिणाम "वापसी" नहीं करना चाहिए? जैसे return array.map...
 – 
Facundo La Rocca
19 अप्रैल 2017, 21:44
नहीं, map return एक array (यह map की संपत्ति है, यह return एक array से लौटा है। map) का शरीर, कि array को jsx के अंदर प्रस्तुत किया जाएगा, वापसी की आवश्यकता नहीं है, क्या यह काम नहीं कर रहा है?
 – 
Mayank Shukla
19 अप्रैल 2017, 21:46
अद्यतन उत्तर की जाँच करें, map का उपयोग jsx के अंदर कैसे करें।
 – 
Mayank Shukla
19 अप्रैल 2017, 21:53

प्रतिक्रिया में काम करते समय आपको कुछ बातों पर ध्यान देने की आवश्यकता है - विशिष्ट होने के लिए JSX। मैं आपको अपने कोड के माध्यम से चलता हूं।

ReactDOM.render(
// JSX starts here
<BootstrapTable data={usersd} search={true} cellEdit={ cellEditProp } height='480px' scrollTop={ 'Bottom' } pagination={true}  multiColumnSearch={ true } >
    <TableHeaderColumn isKey dataField={myfields[0]} width='10' dataAlign='left'>{myfields[0]}</TableHeaderColumn>
    for(var i = 1;i<myfields.length;i++) {
        <TableHeaderColumn dataField={myfields[i]} dataSort={ true } width='15' dataAlign='left' headerAlign='left'>{myfields[i]}</TableHeaderColumn>           
    }
    {
      // You can write javascript code here. However you need to ensure that this will return a react/html component.
     someCondition ?
     <span>positive</span> :
     <span>negative</span>
    }
    {
     // Now might will notice that the for loop that you have used above, doesnt return a valid JSX. To overcome that you need to use the *map* to iterate and return the jsx.
     myfields.map(function() {
      return <TableHeaderColumn dataField={myfields[i]} dataSort={ true } width='15' dataAlign='left' headerAlign='left'>{myfields[i]}</TableHeaderColumn>
     })
    }
</BootstrapTable>
// JSX ends here
, document.getElementById('usersModTable')
);
1
Himanshu Soni 19 अप्रैल 2017, 21:43

आपने मुझे जो भी विचार दिए हैं वे बहुत ही रोचक और बहुत उपयोगी हैं। बूटस्ट्रैपटेबल की प्रकृति को देखते हुए मुझे यह करना था:

var myfields = new Array('id', 'firstName', 'lastName')

const usersd = users;

let components = [<TableHeaderColumn isKey dataField={myfields[0]} width='10' dataAlign='left'>{myfields[0]}</TableHeaderColumn>];

for(var i = 1; i<myfields.length; i++) {
    components.push(<TableHeaderColumn dataField={myfields[i]} dataSort={ true } width='15' dataAlign='left' headerAlign='left'>{myfields[i]}</TableHeaderColumn>);
}

ReactDOM.render(
<BootstrapTable data={usersd} search={true} cellEdit={ cellEditProp } height='480px' scrollTop={ 'Bottom' } pagination={true}  multiColumnSearch={ true } >     

    {components}

</BootstrapTable>,
document.getElementById('usersModTable')
);

पहले "isKey" घटक को सरणी में रखना और अन्य को Facundo La Roca के रूप में उल्लिखित करना। धन्यवाद!!!

0
Jose Cabrera Zuniga 19 अप्रैल 2017, 22:18