我非常喜欢React中的内联CSS模式，并决定使用它。
但是，你不能使用:hover和类似的选择器。那么，在使用内联CSS样式时实现高亮悬停的最佳方法是什么呢?
#reactjs的一个建议是有一个Clickable组件，并像这样使用它:
<Clickable>
<Link />
</Clickable>
Clickable有一个悬停状态，并将其作为道具传递给链接。然而，Clickable(我实现它的方式)将链接包装在一个div中，以便它可以设置onMouseEnter和onMouseLeave。这让事情变得有点复杂(例如，在div中包装的span与span的行为不同)。
有没有更简单的方法?
当前回答
最简单的方式:2022年: useRef +内联onMouseOver/onMouseOut
例子:
var bottomAtag = useRef(null)
.．.然后在里面返回(
<a ref={bottomAtag} onMouseOver={() => bottomAtag.current.style.color='#0F0'} ...></a>
其他回答
我不能100%确定这是否是答案，但这是我用来模拟CSS的技巧:带有颜色和图像的悬停效果。
`This works best with an image`
class TestHover extends React.PureComponent {
render() {
const landingImage = {
"backgroundImage": "url(https://i.dailymail.co.uk/i/pix/2015/09/01/18/2BE1E88B00000578-3218613-image-m-5_1441127035222.jpg)",
"BackgroundColor": "Red", `this can be any color`
"minHeight": "100%",
"backgroundAttachment": "fixed",
"backgroundPosition": "center",
"backgroundRepeat": "no-repeat",
"backgroundSize": "cover",
"opacity": "0.8", `the hove trick is here in the opcaity slightly see through gives the effect when the background color changes`
}
return (
<aside className="menu">
<div className="menu-item">
<div style={landingImage}>SOME TEXT</div>
</div>
</aside>
);
}
}
ReactDOM.render(
<TestHover />,
document.getElementById("root")
);
CSS:
.menu {
top: 2.70em;
bottom: 0px;
width: 100%;
position: absolute;
}
.menu-item {
cursor: pointer;
height: 100%;
font-size: 2em;
line-height: 1.3em;
color: #000;
font-family: "Poppins";
font-style: italic;
font-weight: 800;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
前徘徊
.menu-item:nth-child(1) {
color: white;
background-color: #001b37;
}
在徘徊
.menu-item:nth-child(1):hover {
color: green;
background-color: white;
}
例如:https://codepen.io/roryfn/pen/dxyYqj?editors=0011
你可以使用镭——它是一个开源工具，可以在ReactJS中使用内联样式。它恰好添加了您需要的选择器。非常受欢迎，看看npm上的镭
我最近也遇到了同样的情况。这是我的一个非常简单的解决方案，使用一个自定义钩子，如果元素悬停或不悬停则返回。
export const useOnHover = (ref: React.RefObject) => {
const [hovered, setHovered] = React.useState(false);
const mouseEntered = React.useCallback(() => {
setHovered(true);
}, [ref.current]);
const mouseLeft = React.useCallback(() => {
setHovered(false);
}, [ref.current]);
React.useEffect(() => {
if (!ref.current) return;
ref.current.addEventListener("mouseenter", mouseEntered);
ref.current.addEventListener("mouseleave", mouseLeft);
return () => {
if (!ref.current) return;
ref.current.removeEventListener("mouseenter", mouseEntered);
ref.current.removeEventListener("mouseleave", mouseLeft);
};
}, [ref.current]);
return hovered;
};
现在你可以像这样在任何元素上使用它:
const Button = (props) => {
const buttonRef = React.useRef(null);
const buttonHovered = useOnHover(buttonRef);
return (
<div
ref={buttonRef}
style={{
//your styles
backgroundColor: "red",
filter: buttonHovered ? "saturate(100%)" : "saturate(50%)",
}}
>
{props.title}
</div>
);
};
<Hoverable hoverStyle={styles.linkHover}>
<a href="https://example.com" style={styles.link}>
Go
</a>
</Hoverable>
其中Hoverable定义为:
function Hoverable(props) {
const [hover, setHover] = useState(false);
const child = Children.only(props.children);
const onHoverChange = useCallback(
e => {
const name = e.type === "mouseenter" ? "onMouseEnter" : "onMouseLeave";
setHover(!hover);
if (child.props[name]) {
child.props[name](e);
}
},
[setHover, hover, child]
);
return React.cloneElement(child, {
onMouseEnter: onHoverChange,
onMouseLeave: onHoverChange,
style: Object.assign({}, child.props.style, hover ? props.hoverStyle : {})
});
}
您可以使用css模块作为替代方案，另外还可以使用react-css-modules进行类名映射。
这样你就可以像下面这样导入你的样式，并在你的组件中使用正常的css范围:
import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './table.css';
class Table extends React.Component {
render () {
return <div styleName='table'>
<div styleName='row'>
<div styleName='cell'>A0</div>
<div styleName='cell'>B0</div>
</div>
</div>;
}
}
export default CSSModules(Table, styles);
下面是一个webpack css模块的例子
