javascript - 当 React 状态发生变化时，如何在悬停时仅重新渲染一个组件

Question

有一个图标表示调用处于事件状态，类名为“callConnect”。当我将鼠标悬停在图标上时，图标应该发生变化，新图标的类名为“callDisconnect”

我只是编写一个片段来显示我的实现不起作用:

我正在使用 useRef 和更新函数

const hover = useRef(false)
const updateHoverState = (val: boolean) => {
   hover.current = val
}

在我的组件中，我有一个将图标呈现为这样的方法:

<div onMouseOver={() => {
         updateHoverState(true)
         console.log("hovering", hover.current)}
     } 
     onMouseOut={() => {
         updateHoverState(false)
         console.log("coming out", hover.current)}
     }
>
  {console.log("rendering", hover.current)}  //not working
  {hover.current ? <Icon onClick={() => { }} className={"callDisconnect"} /> : 
              <Icon  onClick={() => { }} className={"callConnect"} />}
</div>

当我运行代码时，当我悬停并移出时，我看到悬停已正确更新为 true 和 false，但图标没有改变。重新渲染没有发生。如何解决请帮忙。

请注意:我已经尝试过使用 useState，因为它不起作用，所以我切换到 useRef。

使用状态:

  const [hover, setHover] = useState(false)
   <div onMouseOver={() => {
             setHover(true)
         } 
         onMouseOut={() => {
             setHover(false)
         }
    >
      {hover ? <Icon onClick={() => { }} className={"callDisconnect"} /> : 
                  <Icon  onClick={() => { }} className={"callConnect"} />} //not updating on hover
    </div>

Answer 1

在 React 中引起重新渲染的唯一方法是设置状态。因此，不要使用引用，而是使用状态变量:

const App = () => {
  const [hover, setHover] = React.useState(false);

  return (
    <div
      style={{ width: 50, height: 50 }}
      onMouseOver={() => {
        setHover(true);
      }}
      onMouseOut={() => {
        setHover(false);
      }}
    >
      {hover ? (
        <div style={{ width: 50, height: 50 }} onClick={() => {}} className={"callDisconnect"} />
      ) : (
        <div style={{ width: 50, height: 50 }} onClick={() => {}} className={"callConnect"} />
      )}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("app"));

.callConnect {
  background-color: green
}
.callDisconnect {
  background-color: red
}

<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="app"></div>