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'