[英]Display counter prop, when mapping to display component in react.
I have an array, with custom Emoji objects, which I'm mapping through to display in my JSX code. 我有一个带有自定义Emoji对象的数组,正在对其进行映射以显示在我的JSX代码中。
I have handler, where a user can add an emoji, and will increment a counter, each time it is selected. 我有处理程序,用户可以在其中添加表情符号,并在每次选择时增加一个计数器。
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
};
});
I imported the Emoji component, from the emoji-mart node module, and mapping the: 我从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>
how can I display the counter variable, next to the Emoji, to see how many times it has been displayed? 如何在表情符号旁边显示计数器变量,以查看已显示多少次?
You can a create a component called EmojiCount
to you'll pass emoji and count as props 您可以创建一个名为EmojiCount
的组件,以传递表情符号并计为道具
const EmojiCount = (props) => {
return (
<Emoji {...props.emoji} />
<div>{props.count}</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.