示例是一个功能组件，我在其中div有条件地渲染。我想这div对淡入时，有条件地渲染和淡出，反之亦然。

为此，我维护了两个本地状态变量：render和fadeIn根据show传递给示例组件的prop计算。

我所做的是：

• 当showprop 为true 时，我设置render为true，因此div有条件地渲染并且在10ms我设置fadeIn 为true的超时之后将我的 div 的 CSS 类名设置为show.
• 当showprop it false 时，我设置fadeIn为false，这将设置我的 div 的 CSS 类名，hide并且在超时200ms（CSS 中的转换时间）之后我设置render 为false以便div有条件地隐藏。

代码：

interface Props {
  show: boolean;
}

const Example: React.FC<Props> = ({ show, }) => {
  const [render, setRender] = useState(false);
  const [fadeIn, setFadeIn] = useState(false);

  useEffect(() => {
    if (show) {
      // render component conditionally
      setRender(show);

      // change state to for conditional CSS classname which will
      // animate opacity, I had to give a timeout of 10ms else the
      // component shows up abruptly
      setTimeout(() => {
        setFadeIn(show);
      }, 10);
    } else {
      // change state to change component classname for opacity animation
      setFadeIn(false);

      // hide component conditionally after 200 ms
      // because that's the transition time in CSS
      setTimeout(() => {
        setRender(false);
      }, 200);
    }
  }, [
    show,
  ]);

  return (
    <div>
      {render && (
        <div className={`container ${fadeIn ? 'show' : 'hide'}`} />
      )}
    </div>
  );
};

样式表：

.container {
  width: 100px;
  height: 100px;
  background-color: black;
  transition: opacity 0.2s ease;
}

.show {
  opacity: 1;
}

.hide {
  opacity: 0;
}

我相信这不是实现功能的良好编码实践，应该在我的组件中只维护一个本地状态。我需要您对如何在不使用任何 3rd Party Library 的情况下以更好的方式解决此问题的建议。谢谢 ：）