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

【问题标题】：React-spring transition throws 126:20-30 'react-spring' does not contain an export named 'Transition'React-spring 转换抛出 126:20-30 'react-spring' 不包含名为 'Transition' 的导出
【发布时间】：2019-05-08 00:44:17
【问题描述】：

按照教程和代码看起来相同，但仍然会出错： “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>

【问题讨论】：

标签： javascript reactjs react-spring

【解决方案1】：

我通过更详细的研究解决了问题。

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

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

【讨论】：

【解决方案2】：

任何与react-spring 相关的内容，您都将使用 'renderprops'

例如：

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

【讨论】：