ReactJS父组件获取子组件PropTypes的实现问题

看起来你混淆了DOM事件对象和组件静态属性的概念，这就是为什么你只能拿到CSS相关数据的原因。咱们一步步来解决这个问题：

为什么之前的方法无效 #

你在testClick里打印的e是DOM点击事件对象，它只包含和点击动作相关的DOM信息（比如目标元素、坐标等），和子组件的propTypes完全不相关，所以自然拿不到你想要的内容。

正确的访问方式 #

函数组件的propTypes是挂载在组件函数本身的静态属性，你可以在父组件中直接通过组件名来访问它，不需要依赖事件或者组件实例：

// 在父组件的任意位置（比如组件内部、事件处理函数里）
console.log('EntityCardComponent 的 PropTypes:', EntityCardComponent.propTypes);

这样就能直接获取到你在子组件里定义的{ isSelected: PropTypes.bool, entity: PropTypes.object, entityType: PropTypes.string }这个对象了。

如果需要在点击事件中关联组件信息 #

如果你是想在点击时拿到当前子组件的props（而不是propTypes），可以在绑定点击事件时把需要的props传进去：

const testClick = (e, entity, isSelected, entityType) => {
  console.log('当前组件的props:', { entity, isSelected, entityType });
  // 同时你依然可以在这里访问子组件的propTypes
  console.log('子组件的PropTypes:', EntityCardComponent.propTypes);
};

// 渲染子组件时传递参数
{availablePlayer.map((item, index) => (
  <EntityCardComponent
    key={index}
    className={'card-background col-md-2 img-fluid mr-2 ml-2 p-0 p-3'}
    isSelected={false}
    entity={item}
    entityType={'character'}
    onClick={(e) => testClick(e, item, false, 'character')}
  />
))}

补充说明 #

对于函数组件来说，不存在类组件那样的实例对象，所以不需要用ref去获取实例再访问propTypes，直接通过组件函数本身的静态属性访问是最直接的方式。

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