正在将函数添加到映射对象中的最后一个元素

Question

我在向映射对象的最后一个元素添加函数时遇到问题。

它是React。

我有一个函数"；handleToggle"-点击后，应该可以看到最后一个div中的元素。点击后的每个元素都有蓝色框架——一次只有一个。因此，在单击最后一个元素("底部"(后，也应该有框架，在这个框架下，我想显示代码末尾div中的一些其他选项。请帮帮我——我不知道如何在地图的最后一个元素中添加函数。

export default function EditorColor(props) {
const [isShown, setIsShown] = useState(false);
const handleToggle = () => setIsShown(!isShown);
const [isChosen, setChosenIcon] = useState('');
const contourIcons = [
{ id: 1, type: 'square' },
{ id: 2, type: 'rounded' },
{ id: 3, type: 'circle' },
{ id: 4, type: 'bottom' },
];
const handleChosenIcon = e => {
setChosenIcon(e.target.title);
console.log(e.target.title);
};
return (
<div>
<div>
{contourIcons.map(icon => (
<div
key={icon.id}
title={icon.type}
className={`contour ${isChosen === icon.type ? 'active-tab' : ''}`}
onClick={handleChosenIcon}
>
{props.name}
</div>
))}
</div>
{isShown && (
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
)}
</div>
);
}```

Answer 1

根据此链接。array.map有一个名为index的可选参数，因此您可以使用它来知道元素的索引现在正在返回

{
contourIcons.map((icon, index) => {
if(index === contourIcons.length - 1) {
//return what you want
}
return (
<div
key={icon.id}
title={icon.type}
className={`contour ${isChosen === icon.type ? 'active-tab' : ''}`}
onClick={handleChosenIcon}
>
{props.name}
</div>
)})
}

Answer 2

不确定这是你想要的，但我所做的是通过检查是否点击了最后一个元素：

handleChosenIcon(icon.type, index === contourIcons.length - 1);

如果检查通过，将调用handleToggle。如果它不是您想要的，您仍然可以根据示例更改代码以满足您的需求：https://codesandbox.io/s/brave-flower-2bs96?file=/src/App.js:152-164