react里面内联css样式怎么样_React中的内联CSS样式：如何实现：hover？

最新推荐文章于 2024-09-16 07:26:36 发布

卓娅zoya

最新推荐文章于 2024-09-16 07:26:36 发布

阅读量1.2k

点赞数

文章标签： react里面内联css样式怎么样

本文链接：https://blog.csdn.net/weixin_42463736/article/details/112808967

版权

本文探讨了在React中实现内联CSS样式，特别是:hover效果的挑战和解决方案。作者介绍了使用混合(mixin)、state管理和事件监听器来处理hover状态，以及推荐了Radium、CSS Modules和Typestyle等库来简化工作。文章还提到了其他一些方法，如使用p标签、内联样式以及风格组件与React Router v4的结合使用。

摘要由CSDN通过智能技术生成

我处于同样的情况真的很喜欢保持组件风格的模式，但hover状态似乎是最后一个障碍。

我所做的是写一个混合，你可以添加到你需要hover状态的组件。这个mixin将会为你的组件添加一个新的hovered属性。如果用户将鼠标hover在组件的主要DOM节点上，则将其设置为true如果用户离开该元素，则将其设置为false 。

现在在你的组件渲染function，你可以做这样的事情：

{this.props.children}

现在，每当hovered状态的状态发生变化时，组件将重新渲染。

我也为此创build了一个沙盒回购，我自己用来testing这些模式。如果你想看到我的实现的例子，请检查它。

我认为onMouseEnter和onMouseLeave是要走的路，但我不认为需要一个额外的包装组件。这是我如何实现它：

var Link = React.createClass({ getInitialState: function(){ return {hover: false} }, toggleHover: function(){ this.setState({hover: !this.state.hover}) }, render: function() { var linkStyle; if (this.state.hover) { linkStyle = {backgroundColor: 'red'} } else { linkStyle = {backgroundColor: 'blue'} } return(

Link

) }

然后，您可以使用hover状态(true / false)来更改链接的样式。

您可以使用Radium – 它是一个使用R

最低0.47元/天解锁文章

react里面 内联css样式怎么样_React中的内联CSS样式：如何实现：hover？

react里面内联css样式怎么样_React中的内联CSS样式：如何实现：hover？