如何根据我在 ReactJS 中悬停的内容来渲染组件？

Posted 2023-05-08

【中文标题】如何根据我在 ReactJS 中悬停的内容来渲染组件？

【英文标题】：How can I render comonents depending of what am I hovering in ReactJS?

【发布时间】：2021-07-26 09:15:23

【问题描述】：

我可以渲染 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/>)

【问题讨论】：

这能回答你的问题吗？ How can I access a hover state in reactjs?

【参考方案1】：

如果基于悬停一个元素有多个元素要显示，则可以使用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>

您还可以将默认情况添加到开关情况，以便根据您的要求显示默认组件或任何消息。

【参考方案2】：

要根据isHovering 是真还是假有条件地显示不同的组件，这应该可以。

改变

isHovering && (<Component/>)

到

isHovering ? (<Component1/>) : (<Component2/>)

如果为真则显示<Component1/>，如果为假则显示<Component2/>。

【讨论】：

是的，但我的意思是 4 个或更多组件