React：循环渲染组件答案

【问题标题】：React: rendering components in a loopReact：循环渲染组件
【发布时间】：2026-01-12 22:35:01
【问题描述】：

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>
   );
}

【问题讨论】：

你说的是函数简写，叫做箭头函数developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

标签： javascript arrays reactjs ecmascript-6 render

【解决方案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 }
                  />
               } )

根据arrow functions，具有隐式返回行为，因此需要明确提及单行表达式。

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>
   );
}

【讨论】：

你在回答中忘记了。

【解决方案2】：

所以箭头函数中的括号返回单个值，花括号在执行多行代码时使用，而不仅仅是简单的返回，因此需要手动返回语句，因为javascript无法知道这些行中的内容返回。

materials.map(material => ({key:material.name}));

返回一个对象

materials.map(material => {
   let newMat = material.name+'_new'; 
   return newMat;
});

我们需要返回，因为我们正在执行 1 行或多行操作并尝试返回最终结果

【讨论】：