反应组件上的 css 过渡

Question

我有一个简单的组件，它根据从其父级接收到的道具转换进/出。 但是，我也希望这个组件在安装时以及它接收到的任何道具上进行动画处理。 我可以让一个或另一个工作，但不能同时工作。

那么要实现的是：

1. Label 组件安装 => 动画 label 进出
2. 从父级接收showLabel道具，如果 true => 动画输入，如果 false => 动画输出

下面的代码满足＃2，但不是一个。

const label = ({ showLabel }) => {
 return (
    <div style={{
        opacity: showLabel ? 1 : 0,
        transition: 'opacity 1s ease-in-out',
    }}
      <p>my label</p>
    </div>
 );
}

Answer 1

如果您添加用例和更多代码（例如您尝试过的其他内容），您可能会获得更好的解决方案，它可以帮助我们了解您到底在做什么。 否则，您将收到基于推测和假设的解决方案。

我假设您正在使用钩子，因为这就是现在的情况。 我只是根据它接收的参数使用了类似于 componentDid* 函数的 useEffect。

const Label = ({ showLabel, setShow }) => {
  React.useEffect(() => {
    setShow(true);
  }, []);

  return (
    <div
      style={{
        opacity: showLabel ? 1 : 0,
        transition: "opacity 1s ease-in-out"
      }}
    >
      <p>my label</p>
    </div>
  );
};

export default function App() {
  const [show, setShow] = React.useState(false);
  return (
    <div className="App">
      <Label showLabel={show} setShow={setShow} />
      <button onClick={() => (show ? setShow(false) : setShow(true))}>
        Click Me!
      </button>
    </div>
  );
}