Question

我有故事书组件，可以在我的项目中使用。因此，我需要在项目中使用Card组件，并且需要添加一些样式。因此，我使用样式组件中的“样式化”添加样式。在我导出新的CardNew并尝试在某些页面中使用它之后。它可以工作，但是当我尝试向该组件添加onMouseLeave / onMouseEnter事件时，它不起作用。

当我尝试使用故事书中Card的初始版本时，没有任何样式和添加事件，它将起作用。这是我的代码。

const CardStyled = styled(Card)`
  width: 200px;
  height: 100px;
  margin-bottom:10px;
  color:red;
  line-height: 1.5em;
`;

export default function CardNew(props) {
  return (
    <CardStyled>
      <Card.Body>
        <p>{props.content}</p>
      </Card.Body>
    </CardStyled`enter code here`>
  )
}

然后我使用该组件并尝试处理任何事件

<CardNew onMouseEnter={() => onMouseEnter()} onMouseLeave={() => onMouseLeave()} >
</CardNew>

谁能解释为什么我不能在故事书组件上进行样式设置，然后使用它？谢谢。

Answer 1

因为CardNew组件不是HTML组件。因此，您应该通过所有道具。喜欢：

export default function CardNew(props) {
    return (
        <CardStyled>
        <Card.Body>
            <p {...props}>{props.content}</p>
        </Card.Body>
        </CardStyled`enter code here`>
    )
}

这将允许您处理

元素的任何事件。

React功能组件不处理事件

1 个答案: