如何使用 .map() 迭代对象并创建多个 <Item />

Question

我创建了一个带有标签和值键的对象。现在我想做的是使用 .map（） 函数为对象中的每个项目创建。

// my object
const ageData = [...Array(71)].map((x, i) => ({ label: i + 10, value: i + 10 }));
//My object looks like 0: {label: 10, value: 10} 1: {label: 11, value: 11}
//What I want to create
<Item label=10 value=10 />
<Item label=11 value=11 />
//My current non-working solution
ageData.map(obj => <Item label=obj.label value=obj.value />)

Answer 1

正如上面提到的注释者，语法需要一些工作。使用功能组件可能是这样的：

const Items = props => {
  return (
    <div>
      {props.someArray.map(obj => (<Item label={obj.label} value={obj.value} />))}
    </div>
  )
}

然后从要在其中显示项的功能组件或呈现方法返回以下内容：

<Items someArray={ageData} />

其中 ageDate 是您的数组。

请注意，您在 JSX 代码中缺少表达式周围的{}，以及从映射返回的 JSX 表达式周围的括号。

奖金：

你可以像这样写更短的函数组件，如果你只需要它来返回一个像上面这样的表达式：

const Items = props => (
  <div>
    {props.someArray.map(obj => (<Item label={obj.label} value={obj.value} />))}
  </div>
)