React Spring 不在组件上 work/load？

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 中。

请帮忙，我正在尝试让这个动画正常工作 - sandbox link

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

React Spring 不在组件上 work/load？

React Spring doesn't work/load on components?

javascript

reactjs

react-native

react-spring