显示计数器道具，当映射到显示反应中的组件时

Question

我有一个数组，带有自定义的表情符号对象，我正在映射这些对象以显示在我的JSX代码中。

我有一个处理程序，用户可以在其中添加一个表情符号，每次选择它时都会增加一个计数器。

addEmoji = (newEmoji) =>{
// mark if new emoji is already in the array or not
let containsNewEmoji = false;
// recreate emojis array
let newEmojis = this.state.emojis.map(emoji => {
// if emoji already there, simply increment count
if (emoji.id === newEmoji.id) {
containsNewEmoji = true;
return { 
...newEmoji,
...emoji,
count: emoji.count + 1,
};
}
// otherwise return a copy of previos emoji
return {
...emoji
};
});

我从Emoji-mart节点模块导入了表情符号组件，并映射了：

<div className="emoji">
{this.state.emojis && 
this.state.emojis.map( (emoji, index) =>{
return(
<Emoji key={index} onClick={this.addEmoji} tooltip={true}
emoji={{id: emoji.id, skin: 1}} size={25}  />
)
})  
}
</div>

如何在表情符号旁边显示计数器变量，以查看它显示了多少次？

Answer 1

您可以创建一个名为EmojiCount的组件，您将传递表情符号并算作道具

const EmojiCount = (props)  => {
return (
<Emoji {...props.emoji} />
<div>{props.count}</div>
);
}