React中的内联CSS样式：如何实现a：hover？

  • Z时代
  • 2024-01-10
  • 分类：问答

我非常喜欢React中的内联CSS模式，并决定使用它。

但是，您不能使用:hover和类似的选择器。那么，在使用内联CSS样式时实现悬停时高亮显示的最佳方法是什么？

reactjs的一个建议是拥有一个Clickable组件并像这样使用它：

<Clickable>
    <Link />
</Clickable>

该Clickable有一个hovered状态，并将其作为道具的链接。但是，Clickable（我的方式来实现它）包裹Link的div，以便它可以设置onMouseEnter并onMouseLeave给它。不过，这会使事情有些复杂（例如，span包裹在div行为上与有所不同span）。

有没有更简单的方法？

回答：

我处于同样的情况。确实像在组件中保留样式的模式，但是悬停状态似乎是最后的障碍。

我所做的是编写一个mixin，您可以将其添加到需要悬停状态的组件中。这个混入将向hovered您的组件状态添加一个新属性。它将被设置为true，如果在组件，并设置主DOM节点的用户悬停回false，如果用户离开元素。

现在，在组件渲染函数中，您可以执行以下操作：

<button style={m(
     this.styles.container,
     this.state.hovered && this.styles.hover,
)}>{this.props.children}</button>

现在，每次hovered状态更改时，组件都会重新呈现。

我还为此创建了一个沙箱存储库，可用来自己测试其中的一些模式。如果您想查看我的实施示例，请查看。

https://github.com/Sitebase/cssinjs/tree/feature-interaction-

mixin

以上是 React中的内联CSS样式：如何实现a：hover？ 的全部内容， 来源链接： utcz.com/qa/429438.html

回到顶部