反应组件上的css转换

Question

我有一个简单的组件，它可以根据从其父体接收到的道具进行转换。然而，我也希望这个组件能在挂载时产生动画，也希望它能接收到任何道具。我可以让其中一个或另一个工作，但不能同时工作。

所以要实现的是

1. 标签组件mounts =>标签的进出动画化
2. 接收 showLabel 如果true => animate in, 如果false => animate out。

下面的代码满足第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，基于它接收的params。

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>
  );
}