Javascript 我如何只悬停一个特定元素，而不是同时悬停两个

现在我有它，所以当我悬停一张牌时，它会呈现两张牌的数据，如下所示：

当我将鼠标悬停在一张卡上时，如何重构代码使其只显示该卡的数据？我知道我可以传递我悬停在上面的卡的特定id，但我不确定如何准确地进行传递

class Landing extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            hover: false,
            stats: [
                {
                    image: 'https://cdn.bulbagarden.net/upload/thumb/6/62/Sapphire_EN_boxart.png/250px-Sapphire_EN_boxart.png',
                    votes: 10745,
                    rating: 1601
                },
                {
                    image: 'https://www.zeldadungeon.net/wiki/images/2/25/Minish-Cap-Cover.jpg',
                    votes: 19345,
                    rating: 5670
                }
            ]

        }
    }

    handleMouseHover = (id) => {
        this.setState({
            hover: !this.state.hover
        })
    }

    renderCards = () => {
        return (
            <div className='card-carousel'>
                {this.state.stats.map(stat => {
                    return (
                        <Card
                            key={stat.id}
                            image={stat.image}
                            onMouseEnter={() => this.handleMouseHover(stat.id)}
                            onMouseLeave={() => this.handleMouseHover()}
                            renderVotesRatings={this.renderVotesRatings()}>
                        </Card>
                    )
                })}
            </div>
        )
    }


    renderVotesRatings = () => {
        if (this.state.hover)
            return (
                <>
                    {this.state.stats.map(stat => {
                        return (
                            <div className='stats-card' key={stat.id}>
                                <img src='https://i.imgur.com/rXfPua4.png'></img>
                                <h3>{stat.votes}</h3>
                                <img src='https://i.imgur.com/1aiORiI.png'></img>
                                <h3>{stat.rating}</h3>
                            </div>
                        )
                    })}
                </>
            )
    }

类登录扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
悬停：错，
统计数据：[
{
图像：'https://cdn.bulbagarden.net/upload/thumb/6/62/Sapphire_EN_boxart.png/250px-Sapphire_EN_boxart.png',
投票：10745，
评级：1601
},
{
图像：'https://www.zeldadungeon.net/wiki/images/2/25/Minish-Cap-Cover.jpg',
票数：19345，
评级：5670
}
]
}
}
handleMouseHover=（id）=>{
这是我的国家({
悬停：！this.state.hover
})
}
renderCards=（）=>{
返回(
{this.state.stats.map（stat=>{
返回(
this.handlemousehaver（stat.id）}
onMouseLeave={（）=>this.handleMouseHover（）}
renderVotesRatings={this.renderVotesRatings（）}>
)
})}
)
}
renderVotesRatings=（）=>{
if（this.state.hover）
返回(
{this.state.stats.map（stat=>{
返回(
{统计投票数}
{stat.rating}
)
})}
)
}

代码似乎不完整。不过，我会告诉你大概的想法。 您应该将每个项作为一个单独的组件，它有自己的状态，如下所示：

class Landing extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      stats: [
        {
          image:
            "https://cdn.bulbagarden.net/upload/thumb/6/62/Sapphire_EN_boxart.png/250px-Sapphire_EN_boxart.png",
          votes: 10745,
          rating: 1601
        },
        {
          image:
            "https://www.zeldadungeon.net/wiki/images/2/25/Minish-Cap-Cover.jpg",
          votes: 19345,
          rating: 5670
        }
      ]
    };
  }

  render() {
    return (
      <div className="card-carousel">
        {this.state.stats.map(stat => {
          return (
            <CardItem
              key={stat.id}
              image={stat.image}
              votes={stat.votes}
              rating={stat.rating}
            />
          );
        })}
      </div>
    );
  }
}

---

我改为这样设置我的组件，现在看起来是这样的，我知道每个卡组件都需要自己的悬停状态，但是当我将CardItem组件插入我的登录容器时，我没有在组件部分中获得悬停状态/未识别状态。我是否还需要在着陆容器中保持悬停状态？我不明白为什么在“组件”部分中没有获得悬停状态/其未被识别？你能证明吗？当然，我有一个父容器，它是landing.jsx，我正在将我的carditem组件导入其中，但据我所知，你不能将单个状态传递到父容器中，所以，如果我的CarItems组件中有悬停状态，并且我将该组件导入到父组件中，那么我认为它不会识别悬停状态？这就是为什么我说当我打开chrome开发工具并检查我的组件部分时，我可以看到我所有的道具，但我看不到悬停状态本身。

class CardItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hover: false
    };
  }

  renderVotesRatings = () => {
    if (this.state.hover) {
      return (
        <div className="stats-card">
          <img src="https://i.imgur.com/rXfPua4.png" />
          <h3>{this.props.votes}</h3>
          <img src="https://i.imgur.com/1aiORiI.png" />
          <h3>{this.props.rating}</h3>
        </div>
      );
    }
  };

  render() {
    return (
      <Card
        image={this.props.image}
        onMouseEnter={() => this.setState({ hover: true })}
        onMouseLeave={() => this.setState({ hover: false })}
        renderVotesRatings={this.renderVotesRatings()}
      />
    );
  }
}