React CSSTransitionGroup - для div предоставлен неожиданный объект ссылки - PullRequest
Новая
       24

React CSSTransitionGroup - для div предоставлен неожиданный объект ссылки

0 голосов
/ 05 августа 2020

, поэтому я недавно начал изучать React.

Моя цель - иметь контейнер с новейшими сообщениями, ...

Каждый раз, когда появляется новое сообщение, щелкнув по нему, сообщение должно исчезнуть, а высота контейнеров должна уменьшиться. Компонент приложения, я звоню 

<MessagesContainer></MessagesContainer>

function MessagesContainer() {
  const [menuHeight, setMenuHeight] = useState(null);
  const dropdownRef = React.createRef();

  useEffect(() => {
    setMenuHeight(dropdownRef.current?.firstChild.offsetHeight);
  }, []);

  function calcHeight(el) {
    const height = el.offsetHeight;
    setMenuHeight(height);
  }

  return (
    <div style={{ height: menuHeight }} ref={{dropdownRef}} className="messages-container">
      <DismissableMessage
        header="Welcome back!"
        content="This is a special notification which you can`t dismiss."
      ></DismissableMessage>
      <DismissableMessage
        header="Welcome back!"
        content="This is a special notification which you can`t dismiss."
      ></DismissableMessage>
      <DismissableMessage
        header="Welcome back!"
        content="This is a special notification which you can`t dismiss."
      ></DismissableMessage>
    </div>
  );

  function DismissableMessage(props) {
    const [visible, dismissMessage] = useState(true);

    

    return (
      <CSSTransition
        in={visible}
        unmountOnExit
        timeout={500}
        className="message-dismiss"
        onExit={calcHeight}
      >
        <Message
          onClick={() => dismissMessage(!visible)}
          header={props.header}
          content={props.content}
        />
      </CSSTransition>
    );
  }
}

Скажите, пожалуйста, если вам что-нибудь понадобится, заранее спасибо.

...