javascript - react : rendering components in a loop

Question

map 的所有文档都使用大括号，但下面的代码和我在处理 React 时看到的大多数示例都使用括号。我试图弄清楚到底有什么区别以及代码在做什么。

使用大括号时，除非我专门添加 return，否则不会呈现任何内容。所以我的看法是，括号充当某种内联函数，自动返回或 React 转换结果并将其内联到 JSX 中？

// Renders fine
render()
{
   return (
      <div className="item-list">
         {
            this.props.items.map(
               ( _item, _index ) => (
               <ItemComponent
                  key={ _index }
                  name={ _item.name }
                  description={ _item.description }
               />
            ) )
         }
      </div>
   );
}

// Nothing
render()
{
   return (
      <div className="item-list">
         {
            this.props.items.map(
               ( _item, _index ) => 
               {
                  <ItemComponent
                     key={ _index }
                     name={ _item.name }
                     description={ _item.description }
                  />
               } )
         }
      </div>
   );
}

// Renders fine
render()
{
   return (
      <div className="item-list">
         {
            this.props.items.map(
               ( _item, _index ) => 
               {
                  return <ItemComponent
                     key={ _index }
                     name={ _item.name }
                     description={ _item.description }
                  />
               } )
         }
      </div>
   );
}

Answer 1

与 React 无关，都是关于 javascript

大括号表示它是函数体，因此我们需要手动使用 return 关键字

 this.props.items.map(
               ( _item, _index ) => 
               { // Note: represent function body, normal javascript function
                  <ItemComponent
                     key={ _index }
                     name={ _item.name }
                     description={ _item.description }
                  />
               } )

根据箭头函数，具有隐式返回行为，因此需要明确提及单行表达式。

render()
{
   return (
      <div className="item-list">
         {
            this.props.items.map(
               ( _item, _index ) => ( // Note: single line expression, so impilicit;y return our ItemComponent
               <ItemComponent
                  key={ _index }
                  name={ _item.name }
                  description={ _item.description }
               />
            ) )
         }
      </div>
   );
}