javascript - React-spring转换抛出126：20-30'react-spring'不包含名为'Transition'的导出(React-spring transition throws 126:20-30 'react-spring' does not contain an export named 'Transition')

Question

Following a tutorial and code looks identical but still getting err: " 126:20-30 'react-spring' does not contain an export named 'Transition'. "... ive read the docs for react spring to get the transition effect and have changed the import tried to redefine my code to what docs said but still nothing.

(遵循一个教程和代码看起来相同，但仍然会出错：“ 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>

  ask by Gabe Corona translate from so

Answer 1

i have solved by being more detailed in my research.

(通过更详细的研究，我已经解决了。)

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

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