ReactJS如何在点击容器div时获取其key属性？

嘿，我来帮你搞定这个问题！首先得明确一点：React的key属性是专门给React内部用来优化列表渲染的，它不会作为组件的props传递，所以你没法直接从<div>元素上获取到这个key值。不过没关系，我们有更直接的办法——既然key本身就是从recipe.idMeal来的，那我们直接用这个原始值就好啦！

下面给你两种常见场景的实现方案：

1. 直接在当前组件中调用Action #

如果是点击卡片或者其他交互触发Action，你可以在map遍历的时候，直接把recipe.idMeal传给对应的处理函数：

renderRecipes() { 
  return _.map(this.props.recipes, recipe => { 
    // 定义处理函数，直接使用recipe.idMeal
    const handleTriggerAction = () => {
      // 这里调用你的action，把id传进去
      this.props.fetchRecipeDetails(recipe.idMeal);
    };

    return ( 
      <div 
        className="card" 
        style={cardStyle} 
        key={recipe.idMeal}
        onClick={handleTriggerAction} // 绑定交互事件
      >
        <img className="card-img-top" src={recipe.strMealThumb} alt={recipe.strMeal} />
        {/* 其他卡片内容 */}
      </div>
    )
  })
}

2. 抽成子组件时传递ID #

如果把卡片单独做成子组件，你可以把recipe.idMeal作为普通props传给子组件，再通过回调函数传递回父组件调用Action：

// 子组件：RecipeCard
const RecipeCard = ({ recipe, onActionTrigger }) => {
  const handleClick = () => {
    // 把id通过回调传给父组件
    onActionTrigger(recipe.idMeal);
  };

  return (
    <div className="card" style={cardStyle} onClick={handleClick}>
      <img className="card-img-top" src={recipe.strMealThumb} alt={recipe.strMeal} />
      {/* 其他卡片内容 */}
    </div>
  );
};

// 父组件中的renderRecipes方法
renderRecipes() { 
  return _.map(this.props.recipes, recipe => { 
    return ( 
      <RecipeCard 
        key={recipe.idMeal} // key还是放在列表项的根元素上
        recipe={recipe}
        onActionTrigger={(mealId) => this.props.fetchRecipeDetails(mealId)}
      />
    )
  })
}

关键提醒 #

永远不要尝试通过ref或者props.key去获取key值——React设计key的时候就没打算让开发者直接访问它。直接使用生成key的原始数据（这里就是recipe.idMeal）是最可靠、最符合React设计理念的方式哦！

内容的提问来源于stack exchange，提问作者Victorious415