React Spring не работает / не загружается на компоненты?

Question

У меня есть следующий компонент с именем test.js с компонентом:

import React, { useRef, useState, useEffect, useCallback } from 'react'
import { render } from 'react-dom'
import { useTransition, animated } from 'react-spring'
import './styles.css'

function App() {
  const ref = useRef([])
  const [items, set] = useState([])
  const transitions = useTransition(items, null, {
    from: { opacity: 0, height: 0, innerHeight: 0, transform: 'perspective(600px) rotateX(0deg)', color: '#8fa5b6' },
    enter: [
      { opacity: 1, height: 80, innerHeight: 80 },
      { transform: 'perspective(600px) rotateX(180deg)', color: '#28d79f' },
      { transform: 'perspective(600px) rotateX(0deg)' },
    ],
    leave: [{ color: '#c23369' }, { innerHeight: 0 }, { opacity: 0, height: 0 }],
    update: { color: '#28b4d7' },
  })

  const reset = useCallback(() => {
    ref.current.map(clearTimeout)
    ref.current = []
    set([])
    ref.current.push(setTimeout(() => set(['Apples', 'Oranges', 'Kiwis']), 2000))
    ref.current.push(setTimeout(() => set(['Apples', 'Kiwis']), 5000))
    ref.current.push(setTimeout(() => set(['Apples', 'Bananas', 'Kiwis']), 8000))
  }, [])

  useEffect(() => void reset(), [])

  return (
    <div>
      {transitions.map(({ item, props: { innerHeight, ...rest }, key }) => (
        <animated.div className="transitions-item" key={key} style={rest} onClick={reset}>
          <animated.div style={{ overflow: 'hidden', height: innerHeight }}>{item}</animated.div>
        </animated.div>
      ))}
    </div>
  )
}

export default App;

Я использовал его со страницы react-spring's example для тестирования некоторых анимаций, но когда я загружаю этот компонент из App.js как показано ниже:

import React from 'react';
import './index.css';
import Home from './components/dashboard/home';
import Test from './components/auth/test';
import { Route, Switch } from 'react-router-dom';
import Navbar from './components/layout/navbar'

function App() {
  return (
    <>
      <Navbar />
      <Switch>
        <Route to='/' component={Home} />
        <Route to='/test' component={Test} />
      </Switch>
    </>
  );
}

export default App;

анимация / текст не отображаются, но они есть в DOM, когда я открываю консоль.

Пожалуйста, помогите, я пытаюсь заставить эту анимацию работать - ссылка на песочницу

Answer 1

Я попытался воссоздать вашу проблему. Я испытал то же самое, если использовал React.StrictMode. Поэтому мне нужно удалить его.

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

После удаления режима scrict.

ReactDOM.render(
    <App />,
  rootElement
);

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

https://codesandbox.io/s/sweet-babbage-ojqho?file= / src / App. js