javascript - React-spring 转换抛出 126:20-30 'react-spring' 不包含名为 'Transition' 的导出

Question

按照教程和代码看起来相同但仍然出错：“ 126:20-30 'react-spring' 不包含名为 'Transition' 的导出。 ”...我阅读了 react spring 的文档以获得过渡效果和已更改导入尝试将我的代码重新定义为文档所说的内容，但仍然没有。

import React, { Component, Fragment, createContext } from 'react';
import { Transition } from 'react-spring';

import logo from './logo.svg';
import './App.css';
import { Toggle } from 'Utilities';
import { Modal } from 'Elements';
import User from './User';
import UserProvider from './UserProvider';




class App extends Component {
  render() {
    return (
      <UserProvider>
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">Welcome to React</h1>
          </header>
          <User />
          <section>
          <Toggle>
            {({ on, toggle }) => (
              <Fragment>
                <button onClick={toggle}>Show / Hide</button>
                <Transition
                  from={{ opacity: 0 }}
                  enter={{ opacity: 1 }}
                >
                    {on && <Header />}
                </Transition>
              </Fragment>
            )}
          </Toggle>
          </section>
          <Toggle>
            {({ on, toggle }) => (
              <Fragment>
                <button onClick={toggle}>Login</button>
                <Modal on={on} toggle={toggle}>
                  <h1>Still what's up this is Gabriel</h1>
                </Modal>
              </Fragment>
            )}
          </Toggle>

Answer 1

我已经通过在我的研究中更详细地解决了。

import { Transition } from 'react-spring/renderprops'

<Transition items={on} from={{ opacity: 0 }} enter={{ opacity: 1 }}>
      {on => on && Header}
</Transition>

Answer 2

任何与react-spring你有关的东西都会使用 'renderprops'

例如：

Import { Transition } from 'react-spring/renderprops'