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

我想在那些使用索引的反应命令上使用循环。所以我可以使用如下的循环：

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

到目前为止，这个循环不起作用，但是，有没有办法做这样的事情？

Answer 1

首先，您忘记使用{}，如果您在js元素中使用任何html代码，则需要使用{}。

您以错误的方式使用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'/>

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

Answer 3

在做出反应时，有几件事你需要注意 - 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')
);

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提到的。感谢!!!

使用循环来创建反应中的元素

4 个答案: