关于javascript:React JSX中的循环


Loop inside React JSX

我尝试在react jsx中执行如下操作(其中objectrow是一个单独的组件)：

1
2
3
4
5
<tbody>
    for (var i=0; i < numrows; i++) {
        <ObjectRow/>
    }
</tbody>

我了解并理解为什么这不是有效的JSX，因为JSX映射到函数调用。但是，由于来自模板Land并且是JSX的新手，我不确定如何实现上述目标(多次添加组件)。

相关讨论

想象一下，你只是在调用javascript函数。不能使用for循环，其中函数调用的参数将变为：

1
2
3
4
5
return tbody(
    for (var i = 0; i < numrows; i++) {
        ObjectRow()
    }
)

看看函数tbody是如何作为参数传递一个for循环的，当然这是一个语法错误。

但您可以创建一个数组，然后将其作为参数传入：

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

使用JSX时，可以使用基本相同的结构：

1
2
3
4
5
6
7
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示例转换成的。与BabelRepl一起玩，了解JSX的工作原理。

相关讨论

不确定这是否适用于您的情况，但通常地图是一个很好的答案。

如果这是带有for循环的代码：

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

你可以用地图这样写：

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

ES6语法：

1
2
3
<tbody>
    {objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>
相关讨论

如果您还没有像@fakerainbrigand's answer那样的到EDOCX1[3]的数组，并且想要内联它，那么源布局对应的输出比@sophiealter's answer更接近：

使用ES2015(ES6)语法(spread和arrow函数)

http://plnkr.co/edit/mfqfwodvy8dkqkokiegv？P=预览

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

回复：巴别塔说，它的警告页面说，扩展需要Array.from，但目前(v5.8.23)在实际扩展Array时似乎不是这样。我有一个文件问题需要澄清。但使用时要自行承担风险。

香草ES5Array.apply

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

内联iIFE

http://plnkr.co/edit/4kqjdtzd4w69g8suu2ht？P=预览

1
2
3
4
5
6
7
8
<tbody>
  {(function (rows, i, len) {
    while (++i <= len) {
      rows.push(<ObjectRow key={i} />)
    }
    return rows;
  })([], 0, 10)}
</tbody>

结合其他答案的技巧

保持与输出对应的源布局，但使内联部分更紧凑：

1
2
3
4
5
6
7
8
9
10
11
12
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，您可以这样做作为使用spread的替代方法，如上图所示：

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

(我认为你可以忽略任何关于fill()的论点，但我不是100%的。)感谢@fakerainbrigand在早期版本的fill()解决方案中纠正了我的错误(见修订版)。

key

在所有情况下，keyattr都可以通过开发构建减轻警告，但在儿童中不可访问。如果您希望子级中的索引可用，可以传递额外的attr。请参阅列表和键进行讨论。

相关讨论

只需使用带有ES6语法的map array方法：

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

不要忘记key属性。

使用数组映射函数是遍历元素数组并根据它们在react中创建组件的非常常见的方法，这是一种很好的循环方法，这是在JSX中执行循环的非常有效和整洁的方法，这不是唯一的方法，而是首选的方法。另外，不要忘记根据需要为每个迭代都有一个唯一的键。map函数从0创建唯一索引，但不建议使用生成的索引，但如果您的值是唯一的或有唯一键，则可以使用它们：

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

此外，如果您不熟悉数组上的map函数，那么MDN中的几行代码也会：

map calls a provided callback function once for each element in an
array, in order, and constructs a new array from the results. callback
is invoked only for indexes of the array which have assigned values,
including undefined. It is not called for missing elements of the
array (that is, indexes that have never been set, which have been
deleted or which have never been assigned a value).

callback is invoked with three arguments: the value of the element,
the index of the element, and the Array object being traversed.

If a thisArg parameter is provided to map, it will be used as
callback's this value. Otherwise, the value undefined will be used as
its this value. This value ultimately observable by the callback is
determined according to the usual rules for determining the this seen
by a function.

map does not mutate the array on which it is called (although
callback, if invoked, may do so).

相关讨论

如果您已经在使用lodash，那么_.times函数就很方便了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React, { Component } from 'react';
import Select from './Select';
import _ from 'lodash';

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

                    )}
               
           
        );
    }
}
相关讨论

还可以在返回块外提取：

1
2
3
4
5
6
7
8
render: function() {
    var rows = [];
    for (var i = 0; i < numrows; i++) {
        rows.push(<ObjectRow key={i}/>);
    }

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

我知道这是一个旧线程，但您可能需要签出http://wix.github.io/react-templates/，它允许您在react中使用JSX样式的模板，并带有一些指令(如rt repeat)。

如果使用React模板，则示例如下：

1
2
3
<tbody>
     <ObjectRow rt-repeat="obj in objects"/>
</tbody>
相关讨论

如果numrow是一个数组，那么它非常简单。

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

react中的数组数据类型非常好，数组可以支持新的数组，并支持过滤、减少等。

相关讨论

有几个答案指向使用map语句。下面是一个完整的示例，使用FeatureList组件中的迭代器根据一个称为Features的JSON数据结构列出功能组件。

1
2
3
4
5
6
7
8
9
10
11
12
const FeatureList = ({ features, onClickFeature, onClickLikes }) => (
 
    {features.map(feature =>
      <Feature
        key={feature.id}
        {...feature}
        onClickFeature={() => onClickFeature(feature.id)}
        onClickLikes={() => onClickLikes(feature.id)}
      />
    )}
 
);

您可以在GitHub上查看完整的功能列表代码。这里列出了特征装置。

相关讨论

假设我们在您的状态中有一系列项目：

1
2
3
4
5
6
7
[{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>
相关讨论

有多种方法可以做到这一点。JSX最终会被编译成JavaScript，只要你写的是有效的JavaScript，你就会很好。

我的答案旨在巩固这里已经呈现的所有精彩方式：

如果没有对象数组，只需行数：

在return块中，创建一个Array并使用Array.prototype.map：

1
2
3
4
5
6
7
8
9
render() {
  return (
    <tbody>
      {Array(numrows).fill(null).map((value, index) => (
        <ObjectRow key={index}>
      ))}
    </tbody>
  );
}

在return块之外，只需使用普通的javascript for循环：

1
2
3
4
5
6
7
8
9
render() {
  let rows = [];
  for (let i = 0; i < numrows; i++) {
    rows.push(<ObjectRow key={i}/>);
  }
  return (
    <tbody>{rows}</tbody>
  );
}

立即调用的函数表达式：

1
2
3
4
5
6
7
8
9
10
11
12
13
render() {
  return (
    <tbody>
      {() => {
        let rows = [];
        for (let i = 0; i < numrows; i++) {
          rows.push(<ObjectRow key={i}/>);
        }
        return rows;
      }}
    </tbody>
  );
}

如果有对象数组

在return块中，.map()每个对象都指向组件：

1
2
3
4
5
6
7
8
9
render() {
  return (
    <tbody>
      {objectRows.map((row, index) => (
        <ObjectRow key={index} data={row} />
      ))}
    </tbody>
  );
}

在return块之外，只需使用普通的javascript for循环：

1
2
3
4
5
6
7
8
9
render() {
  let rows = [];
  for (let i = 0; i < objectRows.length; i++) {
    rows.push(<ObjectRow key={i} data={objectRows[i]} />);
  }
  return (
    <tbody>{rows}</tbody>
  );
}

立即调用的函数表达式：

1
2
3
4
5
6
7
8
9
10
11
12
13
render() {
  return (
    <tbody>
      {(() => {
        const rows = [];
        for (let i = 0; i < objectRows.length; i++) {
          rows.push(<ObjectRow key={i} data={objectRows[i]} />);
        }
        return rows;
      })()}
    </tbody>
  );
}
相关讨论

…或者您也可以准备一个对象数组并将其映射到一个函数以获得所需的输出。我更喜欢这个，因为它可以帮助我保持良好的编码实践，在返回呈现的过程中没有逻辑。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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()循环您的集合，并从每个迭代中返回带有道具的项。

假设objects是一个数组…

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

ES2015/Babel的一种可能性是使用生成器函数创建一个JSX数组：

1
2
3
4
5
6
7
8
9
10
11
12
13
function* jsxLoop(times, callback)
{
    for(var i = 0; i < times; ++i)
        yield callback(i);
}

...

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

我用这个：

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

警察：别忘了钥匙，否则会有很多警告！

相关讨论

如果您选择转换render方法的内部返回()，最简单的选项是使用map()方法。使用map()函数将数组映射为JSX语法，如下所示(使用ES6语法)。

父组件内部：

{ objectArray.map((object, index) => ) }

请注意添加到您的子组件中的key属性。如果没有提供key属性，则可以在控制台上看到以下警告。

Warning: Each child in an array or iterator should have
a unique"key" prop.

现在，在ObjectRow组件中，您可以从对象的属性访问该对象。

在ObjectRow组件内

const { object } = this.props

或

const object = this.props.object

这将获取从父组件传递给ObjectRow组件中的变量object的对象。现在，您可以根据您的目的，将该对象中的值吐出。

参考文献：

javascript中的map()方法

ECMA脚本6或ES6

ES2015数组。从映射函数+键开始

如果您对.map()没有任何内容，可以使用Array.from()和mapFn来重复元素：

1
2
3
<tbody>
  {Array.from({ length: 5 }, (v, k) => <ObjectRow key={k} />)}
</tbody>

我倾向于一种编程逻辑发生在render的返回值之外的方法。这有助于保持实际的东西容易摸索。

所以我可能会这样做：

1
2
3
4
5
6
7
8
9
import _ from 'lodash';

...

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

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

诚然，这是如此之少的代码，嵌入它可能会很好地工作。

相关讨论

JSX代码将编译成纯JavaScript代码，任何标记都将被ReactElement对象替换。在javascript中，不能多次调用函数来收集返回的变量。

这是非法的，唯一的方法是使用数组来存储函数返回的变量。

或者您可以使用Array.prototype.map，这是自JavaScriptES5以来可用的，用于处理这种情况。

也许我们可以编写其他编译器来重新创建一个新的JSX语法来实现重复函数，就像Angular的ng-repeat一样。

你当然可以用另一个答案建议的.map来解决问题。如果您已经使用了babel，那么可以考虑使用JSX控制语句。它们需要一些设置，但我认为在可读性方面是值得的(特别是对于非反应开发人员)。如果您使用linter，还有eslint plugin jsx控制语句

这可以通过多种方式实现。

  • 如上所述，在return之前，将所有元素存储在数组中

  • return内回路

    方法1

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
     let container =[];
        let arr = [1,2,3] //can be anything array, object

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

    方法2

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
       return(
         
         any things goes here
         
            {(()=>{
              let container =[];
              let arr = [1,2,3] //can be anything array, object
              arr.forEach((val,index)=>{
                container.push(
                               val
                               )
                             });
                        return container;    
            })()}

         
     
    )
    • 相关讨论

    要循环多次并返回，可以在from和map的帮助下实现：

    1
    2
    3
    4
    5
      <tbody>
        {
          Array.from(Array(i)).map(() => <ObjectRow />)
        }
      </tbody>

    其中i = number of times。

    我用它像

    1
    2
    3
    4
    5
    <tbody>
    { numrows ? (
       numrows.map(obj => { return <ObjectRow /> })
    ) : null}
    </tbody>

    这里有一个简单的解决方案。

    1
    2
    3
    4
    5
    6
    7
    var Object_rows=[];
    for (var i=0; i < numrows; i++) {
        Object_rows.push(<ObjectRow/>)
    }
    <tbody>
    {Object_rows}
    </tbody>

    不需要映射和复杂代码。只需将行推送到数组并返回值即可呈现。

    相关讨论

    由于您在JSX代码中编写JavaScript语法，因此需要将您的JavaScript用大括号括起来。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    row = () => {
       var rows = [];
       for (let i = 0; i<numrows; i++) {
           rows.push(<ObjectRow/>);
       }
       return rows;
    }
    <tbody>
    {this.row()}  
    </tbody>

    您还可以使用自调用函数：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    return <tbody>
               {(() => {
                  let row = []
                  for (var i = 0; i < numrows; i++) {
                      row.push(<ObjectRow key={i} />)
                  }
                  return row

               })()}
            </tbody>
    相关讨论

    好问题。

    当我想添加一定数量的组件时，我所做的就是使用一个助手函数。

    定义返回JSX的函数：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    const myExample = () => {
        let myArray = []
        for(let i = 0; i<5;i++) {
            myArray.push(<MyComponent/>)
        }
        return myArray
    }

    //... in JSX

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

    你可以这样做：

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

    即使这部密码也做同样的工作。

    1
    2
    3
    4
    5
        <tbody>
          {array.map(i =>
            <ObjectRow key={i.id} name={i.name} />
          )}
        </tbody>

    下面的解决方案你可以在对象或平面阵列的迭代阵列的反馈中执行。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    const rows = [];
    const numrows = [{"id" : 01,"name" :"abc"}];
    numrows.map((data, i) => {
       rows.push(<ObjectRow key={data.id} name={data.name}/>);
    });

    <tbody>
        { rows }
    </tbody>

    黄金

    ZZU1

    更新：

    即使我最近熟悉的对物体的一个编辑阵列的更好的方法，是直接在返回或不返回的情况下绘制地图。

    返回图

    1
    2
    3
    4
    5
    6
       const numrows = [{"id" : 01,"name" :"abc"}];
     <tbody>
           {numrows.map(data=> {
                 return <ObjectRow key={data.id} name={data.name}/>
           })}
    </tbody>

    没有回复的地图

    1
    2
    3
    4
    5
    6
       const numrows = [{"id" : 01,"name" :"abc"}];
     <tbody>
           {numrows.map(data=> (
                 <ObjectRow key={data.id} name={data.name}/>
           ))}
    </tbody>

    以下是来自React Doc的示例：https://facebook.github.io/react/docs/jsx-in-depth.html作为子级的javascript表达式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    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>

      );
    }

    就你的情况而言，我建议这样写：

    1
    2
    3
    4
    5
    6
    7
    function render() {
      return (
        <tbody>
          {numrows.map((roe, index) => <ObjectRow key={index} />)}
        </tbody>
      );
    }

    请注意，键非常重要，因为react使用键来区分数组中的数据。

    问题是您没有返回任何JSX元素。对于这种情况还有其他解决方案，但我将提供最简单的解决方案："使用映射函数"！

    1
    2
    3
    <tbody>
      { numrows.map(item => <ObjectRow key={item.uniqueField} />) }
    </tbody>

    很简单很漂亮，不是吗？

    你可以尝试新的环路

    1
    2
    3
    4
    5
    6
    7
    8
    9
    const apple = {
       color: 'red',
       size: 'medium',
       weight: 12,
       sugar: 10
    }
    for (const prop of apple.entries()){
       console.log(prop);
    }

    HTTPS http://flaviocopes.com/react-how-to-loop/。

    如果您没有密钥值，则打印阵列值，然后使用下一个密码-

    1
           {my_arr.map(item => {item}  )}

    如果numrow是一个数组，另一个答案是最好的方法是map方法。如果它不是，并且您只从JSX访问它，那么您也可以使用这个ES6方法：

    1
    2
    3
    4
    5
    <tbody>
        {
          [...Array(numrows).fill(0)].map((value,index)=><ObjectRow key={index} />)
        }
    </tbody>

    您将要向数组中添加元素并呈现元素数组。这有助于减少重新呈现组件所需的时间。

    下面是一些可能有帮助的粗略代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    MyClass extends Component {
        constructor() {
            super(props)
            this.state = { elements: [] }
        }
        render() {
            return (<tbody>{this.state.elements}<tbody>)
        }
        add() {
            /*
             * The line below is a cheap way of adding to an array in the state.
             * 1) Add <tr> to this.state.elements
             * 2) Trigger a lifecycle update.
             */
            this.setState({
                elements: this.state.elements.concat([<tr key={elements.length}><td>Element</td></tr>])
            })
        }
    }

    如果您真的想在JSX中使用for循环，可以使用IIFE。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <tbody>
      {
        (function () {
          const view = [];
          for (let i = 0; i < numrows; i++) {
            view.push(<ObjectRow key={i}/>);
          }
          return view;
        }())
      }
    </tbody>
    相关讨论

    @如果我理解正确，您可以使用以下代码：

    1
    2
    3
    <tbody>
        { new Array(numrows).fill(<ObjectRow/>) }
    </tbody>

    您可以使用此代码：

    1
    2
    3
    <tbody>
       { new Array(numrows).fill('').map((item, ind) => <ObjectRow key={ind}/>) }
    </tbody>

    而这：

    1
    2
    3
    <tbody>
        new Array(numrows).fill(ObjectRow).map((Item, ind) => <Item key={ind}/>)
    </tbody>

    好吧，给你。

    1
    2
    3
    4
    5
    {
     [1, 2, 3, 4, 5, 6].map((value, index) => {
      return {value}
     })
    }

    只需映射数组并返回您想要呈现的内容，不要忘记在返回元素中使用key。

    我又找到了一个方法来跟踪地图伦德尔

    1
     <tbody>{this.getcontent()}</tbody>

    和分离功能

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
     getcontent() {
    const bodyarea = this.state.movies.map(movies => (
      <tr key={movies._id}>
        <td>{movies.title}</td>
        <td>{movies.genre.name}</td>
        <td>{movies.numberInStock}</td>
        <td>{movies.publishDate}</td>
        <td>
          <button
            onClick={this.deletMovie.bind(this, movies._id)}
            className="btn btn-danger"
          >
            Delete
          </button>
        </td>
      </tr>
    ));
    return bodyarea;
    }

    这个例子很容易解决许多问题

    React元素是简单的JS，所以您可以遵循JavaScript的规则。所以您可以在javascript中使用这样的for循环：

    1
    2
    3
    4
    5
    <tbody>
        for (var i=0; i < numrows; i++) {
            <ObjectRow/>
        }
    </tbody>

    但有效和最好的方法是使用.map函数。如下所示：

    1
    2
    3
    4
    5
    <tbody>
        {listObject.map(function(listObject, i){
            return <ObjectRow key={i} />;
        })}
    </tbody>

    在这里，有一件事是必要的：定义键。否则它会发出这样的警告：

    warning.js:36 Warning: Each child in an array or iterator should have
    a unique"key" prop. Check the render method of ComponentName. See
    "link" for more information.

    每当您需要将任何javascript代码放入JSX时，您应该将并将您的javascript代码放入这些括号中。就这么简单。

    这样就可以在JSX/React中循环。

    说：

    1
    2
    3
       <tbody>
        {your piece of code in JavaScript }
      </tbody>

    例子：

    1
    2
    3
       <tbody>
        { items.map( ( item ) > { console.log(item) }) } // items looping using map
      </tbody>

    JSX中的循环非常简单，尝试一下。

    1
    2
    3
    4
    5
    6
    7
     {
          this.state.data.map((item,index)=>{
            return(
               <ComponentName key={index} data={item}/>
            );
          })
        }

    在react中使用map是迭代数组的最佳实践。

    为了防止ES6 synthax map出现某些错误，在react中使用如下方法：

    1
    2
    3
    <tbody>
     {items.map((item, index) => <ObjectRow key={index} name={item.name} />)}
    </tbody>

    这里您调用一个组件，这样就不需要在箭头后面加括号。

    但你也可以这样做：

    1
    2
    3
    {items.map((item, index) => (
    <ObjectRow key={index} name={item.name} />
    ))}

    或：

    1
    2
    3
    4
    5
    6
    {items.map((item, index) => {
    // here you can log item
          return (
           <ObjectRow key={index} name={item.name} />
         )
    })}

    我这么说是因为如果你在箭头后面加上一个括号""，反应将不会抛出错误并显示一个白名单。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    return (
            <table>
              <tbody>
              {
                numrows.map((item, index) => {
                  <ObjectRow data={item} key={index}>
                })
              }
              </tbody>
            </table>
          );
    相关讨论

    1
    2
    3
    4
    5
    <tbody>
       numrows.map((row,index) => (
          return <ObjectRow key={index}/>
       )
    </tbody>
    相关讨论

    在一个JSX块内，周围的Javascript将得到它，以便预先执行任何Javascript Action you are trying to do.

    1
    2
    3
    4
    5
    6
    7
    <tr>
      <td>
        {data.map((item, index) => {
          {item}
        })}
      </td>
    </tr>

    这是Kinda浪潮，但你可以为任何阵列交换数据。这将为每个项目提供一张桌子和一张桌子项目。如果你在阵列中的每一个角落都有更多的东西

    1
    <td>{item.someProperty}</td>

    在你想用不同的TD来处理的情况下，用不同的例子来处理。

    在一个阵列和产生JSX元素的间隙中，有许多解决方案。所有的索引都很好，但所有的索引都直接在环路中使用。我们推荐使用数据的唯一标识作为一个关键字，但当我们没有从每一个对象在阵列中的唯一标识时，我们将使用索引作为一个关键词，但您不推荐使用索引作为一个关键词。

    一个更重要的是，我们为什么要去地图，但为什么不去每一个，因为地图返回一个新的阵列。这些天有不同的行程图。

    下面是不同版本的地图插图，详细说明如何使用唯一的键，以及如何使用映射来装载JSX元素。

    MAP without return when returning single JSX element and unique id from data as a key version

    1
    2
    3
    4
    5
    const {objects} = this.state;

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

    MAP without return when returning multiple JSX elements and unique id from data as a key version

    1
    2
    3
    4
    5
    6
    7
    8
    9
    const {objects} = this.state;

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

    MAP without return when returning single JSX element and index as a key version

    1
    2
    3
    4
    5
    const {objects} = this.state;

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

    MAP without return when returning multiple JSX elements and index as a key version

    1
    2
    3
    4
    5
    6
    7
    8
    9
    const {objects} = this.state;

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

    MAP with return when returning multiple JSX elements and index as a key version

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    const {objects} = this.state;

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

    MAP with return when returning multiple JSX elements and unique id from data as a key version

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    const {objects} = this.state;

    <tbody>
        {objects.map(object => {
           return (
             
                <ObjectRow obj={object} />
             
           )
        })}
    </tbody>

    另一种方式是

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    render(){
      const {objects} = this.state;
      const objectItems = objects.map(object => {
           return (
             
                <ObjectRow obj={object} />
             
           )
        })
    return(
       
         <tbody>
           {objectItems}
         </tbody>
       
     )
    }

    提供更直的前进解决方案，以方便您使用特定的流量计数以Integer我们可以与曼纳一起实现我们的愿望。

    1
    2
    3
    4
    5
    6
    7
    8
    // Let's create typedArray with length of `numrows`-value
    const typedArray = new Int8Array(numrows); // typedArray.length is now 2
    const rows = []; // Prepare rows-array
    for (let arrKey in typedArray) { // Iterate keys of typedArray
      rows.push(<ObjectRow key={arrKey} />); // Push to an rows-array
    }
    // Return rows
    return <tbody>{rows}</tbody>;

    你必须用JSX写

    1
    2
    3
    4
    5
    6
    7
    <tbody>
        {
        objects.map((object, i) => (
            <ObjectRow obj={object} key={i} />
        ));
        }
    </tbody>