Reactjs 未在React功能组件中呈现内部div

我不明白为什么我的内部div没有被渲染，所以我希望有人能帮我指出这个问题

const avatarColors=[
"labc9c",，
“#2ecc71”，
"607d8b",，
"a20cc",，
"cddc39",，
'#009688',
"fba4b4",，
"ffd54f",，
“#ff5e00”
]
导出常量AvatarColorMenu=（）=>
{avatarColors.map（颜色=>{
C
})}
导出默认的AvatarColorMenu

.avatarColorMenuContainer{
显示：网格；
网格模板列：75px 75px 75px；
背景色：#444；
网格间距：5px；
}
.avatarcolormenucainer>div{
宽度：75px；
高度：75px；
边界半径：50%；
填充：20px；
}

这里有两个问题：

将返回值括在括号中

在

映射（..）

中显式地

返回

，或者用括号而不是大括号包装返回值

const AvatarColorMenu=（）=>(
{avatarColors.map（（颜色）=>(
C
))}
);这里有两个问题：

将返回值括在括号中

在
映射（..）
中显式地
返回
，或者用括号而不是大括号包装返回值


const AvatarColorMenu=（）=>(
{avatarColors.map（（颜色）=>(
C
))}
);您在map（）中缺少返回

另外，将{color}更改为color

例如：

{avatarColors.map(color => {
   return (<div key={color} style={{ backgroundColor: color }}>C</div>)
})}

{avatarColors.map（颜色=>{
返回（C）
})}
您在地图（）中缺少返回

另外，将{color}更改为color

例如：

{avatarColors.map(color => {
   return (<div key={color} style={{ backgroundColor: color }}>C</div>)
})}

{avatarColors.map（颜色=>{
返回（C）
})}
箭头函数（高阶）需要返回语句；因为javascript解释一行末尾的分号！这样，它在这一行的末尾添加了一个分号：（export const AvatarColorMenu=（）=>）

export const AvatarColorMenu=（）=>
{avatarColors.map（颜色=>{
返回C
})}

或者，如果您不需要return语句，请将其如下所示（在一行中）

export const AvatarColorMenu=（）=>{avatarColors.map（color=>C）}
箭头函数（高阶）需要返回语句；因为javascript解释一行末尾的分号！这样，它在这一行的末尾添加了一个分号：（export const AvatarColorMenu=（）=>）

export const AvatarColorMenu=（）=>
{avatarColors.map（颜色=>{
返回C
})}

或者，如果您不需要return语句，请将其如下所示（在一行中）

export const AvatarColorMenu=（）=>{avatarColors.map（color=>C）}

export const AvatarColorMenu = () => <div className='avatarColorMenuContainer'> { avatarColors.map(color => <div key={color} style={{backgroundColor: {color}}}>C</div>)} </div>