javascript - 当映射到 react 中的显示组件时，显示计数器 Prop 。

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 节点模块导入了 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>

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

Answer 1

您可以创建一个名为 EmojiCount 的组件，您将传递表情符号并将其计为 Prop

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