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'

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

2 个答案: