React Spring 不能在组件上工作/加载？答案

【问题标题】：React Spring doesn't work/load on components?React Spring 不能在组件上工作/加载？
【发布时间】：2020-10-31 10:26:38
【问题描述】：

我有以下组件命名为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

【问题讨论】：

您可能想要删除 Angular 标签 ????
你能指出来吗？我的角度有点菜鸟
我的意思是 SO 问题本身。这个问题也用 Angular 标记..
哦，好吧，现在没关系，下次记住了
我为你修好了，没问题 :-)

标签： javascript reactjs react-native react-spring

【解决方案1】：

我试图重现您的问题。如果我使用 React.StrictMode，我也会遇到同样的情况。所以我必须删除它。

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

移除严格模式后。

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

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

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

【讨论】：

谢谢。为我工作