Блог

Я не могу заставить react-spring работать. Я довольно новичок в этом, поэтому понятия не имею, что происходит не так. Я пытаюсь сделать так, чтобы панель навигации отображалась сверху вниз до 40 Вч, но, похоже, она не распознает переданные реквизиты. Я использовал create-react-app и react-spring 8.0.27

App.js:

 const App = () => {
  const [open, setOpen] = useState(false);

  const navprops = useSpring({
    from: {height: "0"},
    to: {height: "40vh"}
  })

  return (
    <Fragment>
      {open ? <Navbar style={navprops}/> : null}
    </Fragment>
  

Navbar.js:

 
const NavBar = styled(animated.nav)`
  width: 100%;
`;

const Navbar = (props) => {
  return (
    <NavBar style={props.style}>
    </NavBar>
  );
};
  

Это в основном код. Есть больше реквизитов стиля, но я думаю, это не имеет отношения к функциональности.

animated и useSpring импортируются в оба файла для тестирования. Спасибо за вашу помощь.

Вот мое решение,

Демонстрационная ссылка

Navbar.js

 import React from "react";
import styled from "styled-components";
import { animated } from "react-spring";

const NavBar = styled(animated.nav)`
  width: 100%;
  background: red;
`;

export default (props) => {
  return <NavBar style={props.style}></NavBar>;
};
  

App.js

 import React, { useState } from "react";
import { useTransition, config } from "react-spring";
import Navbar from "./Navbar";

export default function App() {
  const [open, setOpen] = useState(false);

  // const navprops = useSpring({
  //   from: { height: "0" },
  //   to: { height: "40vh" },
  //   config: config.wobbly
  // });

  const transitions = useTransition(open, null, {
    initial: { height: "0px" }, //Not required
    from: { height: "0px" },
    enter: { height: "40vh" },
    leave: { height: "0px" },
    config: config.wobbly //More configs here https://www.react-spring.io/docs/hooks/api
  });

  return (
    <div className="App">
      {transitions.map(
        ({ item, key, props }) => item amp;amp; <Navbar key={key} style={props} />
      )}
      <br />
      <br />
      <button onClick={() => setOpen(!open)}>Toggle Navbar</button>
    </div>
  );
}
  

Я не думаю, что useSpring будет работать с размонтированным компонентом. Вы пытались анимировать размонтированный компонент.

Согласно документации, useTransition можно использовать для анимации монтирования размонтированных компонентов.

Синтаксис немного сложный, но они упростили синтаксис в версии 9 (release candidate) react-spring Ссылка здесь