css переход на реагирующем компоненте - PullRequest
Новая
       30

css переход на реагирующем компоненте

0 голосов
/ 07 мая 2020

У меня есть простой компонент, который входит / выключается в зависимости от свойства, которое он получает от своего родителя. Тем не менее, я также хотел бы, чтобы этот компонент анимировался при монтировании, а также на любой получаемой опоре. Я могу заставить работать одно или другое, но не то и другое вместе. * Получить showLabel prop от родителя, если true => анимировать внутрь, если false => анимировать вне

Код ниже удовлетворяет # 2, но не одному. 

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

1 Ответ

0 голосов
/ 07 мая 2020

Вероятно, вы получите лучшее решение, если добавите варианты использования и немного больше кода, подобного тому, что вы пробовали, это поможет нам понять, что именно вы делаете. В противном случае вы получите решение, основанное на предположениях и предположениях.

Я предполагаю, что вы используете хуки, потому что это то, что есть сейчас. Я просто использовал useEffect, который похож на функции componentDid * на основе получаемых им параметров. 

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