React Styled-Components中onClick失效，如何不修改组件直接调用？

你的问题核心在于DeleteButton组件仅接收并传递className属性，其他props（包括onClick）会被直接忽略。当用styled(DeleteButton)创建新组件时，onClick无法传递到底层的<button> DOM元素，因此无法触发。以下是两种无需修改DeleteButton的解决方法：

方法一：事件委托 #

借助事件冒泡机制，在StyledDeleteButton的父容器上绑定点击事件，通过判断目标元素来执行删除逻辑：

<div onClick={(e) => {
  // 通过类名标识判断点击目标
  if (e.target.closest('.custom-delete-btn')) {
    DeleteItem(item._id);
  }
}}>
  <StyledDeleteButton className="custom-delete-btn" />
</div>

方法二：复用基础样式创建新组件 #

既然DeleteButton只是对GenericStyledDeleteButton的简单封装，你可以直接基于原生button创建新的styled组件，复用通用按钮样式：

const StyledDeleteButton = styled.button`
  // 复用通用按钮的样式
  ${GenericStyledDeleteButton}
  // 添加自定义样式
  margin-left: auto;
  margin-right: 25px; 
`;

// 直接使用，onClick可正常触发
<StyledDeleteButton onClick={() => DeleteItem(item._id)} />

这种方法跳过了DeleteButton的封装层，直接操作底层DOM元素的样式和事件，避免了props传递的遗漏问题。

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