当映射到react中的显示组件时，显示计数器属性。
当映射到react中的显示组件时，显示计数器属性。
提问于 2018-12-07 06:40:07
我有一个带有自定义Emoji对象的数组，我正在映射它以在我的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节点模块导入了Emoji组件，并映射了：
<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>如何在Emoji旁边显示计数器变量，以查看它已经显示了多少次？
回答 1
Stack Overflow用户
发布于 2018-12-07 07:04:26
你可以创建一个名为EmojiCount的组件来传递表情符号并算作道具
const EmojiCount = (props) => {
return (
<Emoji {...props.emoji} />
<div>{props.count}</div>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53660771
复制相关文章
相似问题
腾讯云开发者
