React函数式组件内层div未渲染，请求协助排查问题

嗨，我帮你排查出几个导致内层div无法渲染的问题，咱们一个个拆解来看：

1. map函数缺少返回值 #

你在avatarColors.map里用了大括号{}包裹回调代码，但没有显式返回<div>元素。箭头函数如果用大括号包裹代码块，必须手动写return才能返回内容；如果想简化写法，可以去掉大括号，用隐式返回的方式。

2. style属性的语法错误 #

style={{backgroundColor: {color}}}这里的写法有误：color本身就是一个字符串变量，不需要再用对象包裹，应该直接写backgroundColor: color。

3. 无效的十六进制颜色值 #

你的avatarColors数组里有几个不符合规范的颜色值：

• #labc9c：这里的l是字母L，应该是数字1，正确值为#1abc9c
• #a20c0cc：十六进制颜色只能是3位或6位字符，这里多了一个c，应该改成#a20c0c

修正后的完整代码 #

const avatarColors = [ '#1abc9c', '#2ecc71', '#607d8b', '#a20c0c', '#cddc39', '#009688', '#fba4b4', '#ffd54f', '#ff5e00' ]

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

export default AvatarColorMenu

我把组件的JSX用小括号包裹实现了隐式返回，同时修正了颜色值和style的写法，这样内层的div应该就能正常渲染了。如果之后样式还是不显示，记得检查.avatarColorMenuContainer的CSS是否给内层div设置了合适的宽高哦~

内容的提问来源于stack exchange，提问作者mdebeus