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.SrictMode，我也会遇到同样的情况。所以我必须删除它。

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

删除划线模式后。

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

你的问题可能不同，但有趣的是，它在dom中，但没有像你描述的那样显示出来。

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