Переходные элементы «Реакт-пружина» 126: 20-30 «Реакт-пружина» не содержит экспорт с именем «Переход» - PullRequest
0 голосов
/ 08 мая 2019

После учебника и код выглядит идентично, но все еще получает ошибку: « 126: 20-30« реактивная пружина »не содержит экспорт с именем« Переход ». » ... я прочитал документы для реактивной пружины, чтобы получить эффект перехода, и изменил импорт, пытаясь переопределить мой код к тому, что сказали документы, но все равно ничего.

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>

1 Ответ

0 голосов
/ 08 мая 2019

Я решил, будучи более подробным в моем исследовании.

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

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