在 jsx 数组 .map 中添加 javascript

【问题标题】：adding javascript inside jsx array .map在 jsx 数组 .map 中添加 javascript
【发布时间】：2021-08-28 15:47:40
【问题描述】：

我对 React 打字非常陌生，我想问一下是否可以在 jsx 循环中添加 javascript？我一直在尝试很多方法，但似乎没有任何效果，所以我想看看是否有人有任何建议或想法。

{[...Array(7)].map((item,i) => (
        
      //basically i want to add my "if" condition here but i am not sure about the syntax


     <Tab id={"Item" + (number - i)} title={"Item " + (number - i )}></Tab>
         
  ))}

【问题讨论】：

标签： reactjs typescript jsx

【解决方案1】：

目前您的 map() 箭头函数使用括号，这是返回括号中内容的简写。如果您想要 map() 中的其他代码而不是 return 语句，请改用花括号，如下所示：

{[...Array(7)].map((item,i) => { // change to curly brace
        
      // now you can write code here

     // We are no longer using the return shorthand so we explicitly state what we return
     return <Tab id={"Item" + (number - i)} title={"Item " + (number - i )}></Tab>
         
  })}

【讨论】：