javascript - 如何根据我在 ReactJS 中悬停的内容来渲染组件?
问题描述
我可以渲染 1 个组件,但是否有另一种方法可以根据我悬停的内容来渲染其他组件?
constructor(props) {
super(props)
this.handleMouseHover = this.handleMouseHover.bind(this)
this.state={
isHovering: false
}
}
handleMouseHover(){
this.setState(this.toggleHoverState)
}
toggleHoverState(state) {
return {
isHovering:!state.isHovering
}
}
<a href="#" onMouseEnter={this.handleMouseHover} onMouseLeave={this.handleMouseHover}>Hover me1</a>
<a href="#" onMouseEnter={this.handleMouseHover} onMouseLeave={this.handleMouseHover}>Hover me2</a>
{isHovering && (<Component/>)}
解决方案
switch
如果基于一个元素的悬停有多个元素要显示,则可以使用。
在下面的示例中,我考虑了 3 个anchor
元素并添加了相应mouse over
的mouse out
事件处理程序,以便在它们下方显示相应的悬停元素。
const {useState} = React;
const App = () => {
const [hoveredOn, setHoveredOn] = useState(-1);
const getElement = () => {
switch(hoveredOn) {
case 0: return <p>Hovered Element 0</p>
case 1: return <p>Hovered Element 1</p>
case 2: return <p>Hovered Element 2</p>
}
}
const onMouseOver = (index) => {
setHoveredOn(index);
}
const onMouseOut = () => {
setHoveredOn(-1);
}
return (
<div>
<a href="#" onMouseOver={() => {onMouseOver(0)}} onMouseOut={onMouseOut}>Element 0</a>
<a href="#" onMouseOver={() => {onMouseOver(1)}} onMouseOut={onMouseOut}>Element 1</a>
<a href="#" onMouseOver={() => {onMouseOver(2)}} onMouseOut={onMouseOut}>Element 2</a>
{getElement()}
</div>
)
}
ReactDOM.render(<App />, document.getElementById("react"));
a {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="react"></div>
您还可以将默认情况添加到开关情况,以便根据您的要求显示默认组件或任何消息。
推荐阅读
- xml - XML格式问题
- angular - 将 rxjs 与 http observable 一起使用时遇到问题
- c++ - 如何使用递归反转链表?
- docker - 如何使用 docker buildx 推送镜像到 registry 使用 http 协议?
- java - Docker 组合中拒绝 Spring 应用程序连接
- php - phpMailer 证书验证失败
- python - Python 帮助:难以将日期变量传递给 sql
- javascript - 如何在 Angular 9 中使用 ngx-image-zoom 在悬停时在图像旁边显示图像缩放弹出窗口?
- java - 在调用 ejb 方法以及 javax.jms.Message 对象低于错误 NonSerializable
- r - 是否有用于从“beta + beta*t”之类的字符串创建公式的 R 函数?