react jsx 循环_如何在React JSX内部循环

react jsx 循环

If you have a set of elements you need to loop upon to generate a JSX partial, you can create a loop, and then add JSX to an array:

如果有一组元素需要循环以生成JSX部分,则可以创建一个循环,然后将JSX添加到数组中:

const elements = [] //..some array
 
const items = []

for ( const [ index , value ] of elements . entries ()) {
  items . push ( < Element key = { index } /> )
}

Now when rendering the JSX you can embed the items array by wrapping it in curly braces:

现在,当渲染JSX时,您可以通过将其包装在花括号中来嵌入items数组:

render () {
  const elements = [ 'one' , 'two' , 'three' ];

  const items = []

  for ( const [ index , value ] of elements . entries ()) {
    items . push ( < li key = { index } > { value } < /li>)
  }

  return (
    < div >
      { items }
    < /div>
  )
}

You can do the same directly in the JSX, using map instead of a for-of loop:

您可以使用map而不是for-of循环直接在JSX中执行相同的操作:

render : function () {
  const elements = [ 'one' , 'two' , 'three' ];
  return (
    < ul >
      { elements . map (( value , index ) => {
        return < li key = { index } > { value } < /li>
      })}
    < /ul>
  )
}

翻译自: https://flaviocopes.com/react-how-to-loop/

react jsx 循环

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值