Question

我无法弄清楚为什么我的内部div没有被渲染，所以我希望有人可以帮助指出问题。

＆＃13;

const avatarColors = [
    '#labc9c',
    '#2ecc71',
    '#607d8b',
    '#a20c0cc',
    '#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

＆＃13;

.avatarColorMenuContainer {
  display: grid;
  grid-template-columns: 75px 75px 75px;
  background-color: #444;
  grid-gap: 5px;
}

.avatarColorMenuContainer > div {
  width: 75px; 
  height: 75px;
  border-radius: 50%;
  padding: 20px;
}

＆＃13;

结果呈现为：

＆＃13;

<div className='avatarColorMenuContainer'></div>

＆＃13;

Answer 1

这里有两个问题：

将括号中的返回值包装
在return内明确map(..)，或用括号括起返回值，而不是花括号。

＆＃13;

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

＆＃13;

Answer 2

你错过了map（）

中的返回

另外，将{color}更改为color

例如：

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

Answer 3

箭头函数（高阶）需要一个return语句;因为javascript在一行的末尾解释了分号！这样它在这一行的末尾添加了一个分号:( export const AvatarColorMenu =（）=＆gt;）

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

或者如果你不想要一个return语句，那就把它放在下面（在一行中）

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

内部div未在React Functional组件中呈现

3 个答案: