React JSX内部回路

我试图在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：

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

我意识到并理解为什么这不是有效的JSX，因为JSX映射到函数调用。然而，由于来自模板领域，而且是JSX的新手，我不确定如何实现上述目标（多次添加组件）。

当前回答

如果numrows是一个数组，那么最好的方法就是map方法。如果不是，并且您只能从JSX访问它，您也可以使用以下ES6方法：

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

其他回答

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

为了防止ES6出现一些错误，React中使用了如下语法映射：

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

在这里，您调用一个组件＜ObjectRow/＞，因此不需要在箭头后面加括号。

但你也可以这样做：

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

Or:

{items.map((item, index) => {
    // Here you can log 'item'
    return (
        <ObjectRow key={index} name={item.name} />
    )
})}

我这么说是因为如果在箭头后面加上括号“｛｝”，React将不会抛出错误，并显示白名单。

如果你真的想要一个for循环等价物（你有一个数字，而不是一个数组），只需使用Lodash中的范围。

不要重新发明轮子，不要混淆代码。只需使用标准实用程序库。

import range from 'lodash/range'

range(4);
// => [0, 1, 2, 3]

range(1, 5);
// => [1, 2, 3, 4]

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

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

不要忘记密钥属性。

除非声明函数并用参数将其括起来，否则这是不可能的。在JSXExpression中，您只能编写表达式，而不能编写诸如for（）、声明变量或类或if（）语句之类的语句。

这就是为什么函数CallExpressions现在如此流行的原因。我的建议是：习惯它们。我会这样做：

const names = ['foo', 'bar', 'seba']
const people = <ul>{names.map(name => <li>{name}</li>)}</ul>

过滤：

const names = ['foo', undefined, 'seba']
const people = <ul>{names.filter(person => !!person).map(name => <li>{name}</li>)}</ul>

if（）：

var names = getNames()
const people = {names && names.length &&
   <ul>{names.map(name => <li>{name}</li>)}</ul> }

如果-其他：

var names = getNames()
const people = {names && names.length ?
  <ul>{names.map(name => <li>{name}</li>)}</ul> : <p>no results</p> }

您可以执行以下操作：

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

推荐文章