使用循环在React中创建元素

Question

基于下一个工作代码：

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')
);

我想在使用索引的React命令上使用循环。所以我可以像这样使用循环：

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')
);

目前这个循环不起作用，但是有没有一种可行的方法来做类似这样的事情呢？

- Jose Cabrera Zuniga

Answer 1

首先，你忘记使用{}了，如果你在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'));

看这个例子，如何在jsx中使用 map:

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'/>

- Mayank Shukla

---

代码不应该返回 map 函数的结果吗？像 return array.map... - Facundo La Rocca

不需要使用return，map会返回一个数组（这是map的属性，它将返回从map主体中返回的所有元素的数组），该数组将在jsx内呈现。如果不起作用，请检查代码。 - Mayank Shukla

@FacundoLaRocca，请查看更新的答案，了解如何在jsx中使用map。 - Mayank Shukla

Answer 2

Mayank Shukla 提出的代码是一种很好的获取你想要的东西的方法（我也会用相同的方式）。但如果你想使用循环，那么应该更或多或少地像这样：

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')
);

- Facundo La Rocca

Answer 3

在使用React时，有一些需要特别注意的事项，尤其是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')
);

- Himanshu Soni

Answer 4

你给我的所有想法都非常有趣且非常有帮助。鉴于BootstrapTable的性质，我必须执行以下操作：

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提到的那样添加其他组件。谢谢！

- Jose Cabrera Zuniga