如何在react组件中添加和删除classNames

Question

我想使用React钩子实现这样的东西：

const header = document.querySelector(".nav-header");
function stickyHeader() {
if (window.pageYOffset > 600) {
header.classList.remove("header");
} else {
header.classList.add("header");
}
}
window.addEventListener("scroll", () => {
stickyHeader();
});

上面是我在vanillajs中操作DOM的方法。我想对react中的一个组件做同样的操作。

Answer 1

可能尝试一个getClassName方法，该方法在每个渲染上返回一个连接的类数组

对于功能组件

const getClassName = () => {
let classes = ["nav"];
if (window.pageYOffset > 600) {
classes.push("header");
} 
//more conditions if required
return classes.join(" ");
//returns "nav header" || "nav"
}

然后在您的组件返回方法中

return (
<div className={getClassName()}><div>
)

Answer 2

className是一个元素属性。因此，您需要在render组件函数中设置它，如下所示：

...
render() {
let className = 'menu';
if (this.props.isActive) {
className += ' menu-active';
}
return <span className={className}>Menu</span>
}

下面是一个关于如何使用React 处理滚动事件的示例