React Styled-Components onClick 不起作用

Question

我正在嘗試在從樣式化組件創建的 React 組件上運行 onClick，但如果沒有解決方法，它就無法工作。

款式一：

const GenericStyledDeleteButton = styled.button`
    height: 30px;

    font-size: 20px;
    text-align: center;
    color: green;

    border: none;
    border-radius: 5px;

    &:hover {
        color: red;
    }
`;

零件：

const DeleteButton = ({className}) => (
  <GenericStyledDeleteButton className={className}
    Delete
  </GenericStyledDeleteButton>
);

Style 3:
const StyledDeleteButton = styled(DeleteButton)`
   margin-left: auto;
   margin-right: 25px; 
`;

我創建了一個通用樣式的組件，然后創建了一個帶有一些文本的 React 本機組件，然后在通用樣式的組件上添加了一些進一步的樣式。 我正在嘗試執行以下操作：

<StyledDeleteButton onClick={() => DeleteItem(item._id)} />

我已經嘗試了 onClick 和 onClick，但它們不起作用。 但是，當我添加以下內容時它會起作用：

const DeleteButton = ({ className, onClick }) => (
  <GenericStyledDeleteButton className={className} onClick={onClick}>
    Delete
  </GenericStyledDeleteButton>
);

onClick 適用於我擁有的其他樣式組件，但不適用於這個組件。 所以我的問題是，如何在不更改 DeleteButton 組件的情況下直接在 StyledDeleteButton 上調用 onClick？

直接在樣式化組件中使用 onClick 而無需實施變通方法。

Answer 1

const DeleteButton = ({ className, onClick }) => (
  <GenericStyledDeleteButton className={className} onClick={onClick}>
    Delete
  </GenericStyledDeleteButton>
);

這不是解決方法。 這就是它應該如何工作的。 如果DeleteButton不接受onClick ，則不能傳遞。 道具從父級傳遞給子級。

StyledDeleteButton將onClick傳遞給DeleteButton 。 如果DeleteButton沒有onClick ，它不能將它傳遞給它的孩子。

這是自然的方式。 如果您不想更改DeleteButton ，您可以使用上下文提供程序進行變通，但您必須更改GenericStyledDeleteButton接收onClick的方式。 它不如向其添加 onClick 道具那么好。