Storybook: Компонент с реагирующим маршрутизатором

Созданный на 14 апр. 2017 · 13Комментарии · Источник: storybookjs/storybook

Как я могу использовать сборник рассказов с компонентами, в которых используется реагирующий маршрутизатор

Пример компонента

import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'react-router-dom'
import Brand from './components'

const Logo = ({children}) => {
  return (
    <Link to='/'>
      <Brand>
        {children}
      </Brand>
    </Link>
  )
}

Logo.propTypes = {
  children: PropTypes.string.isRequired
}

export default Logo

Ошибка

screen shot 2017-04-14 at 4 27 22 am

Источник

garmjs

👍2

Самый полезный комментарий

Вы должны заключить свою историю в MemoryRouter используя функцию addDecorator . Вот отрывок:

storiesOf('Logo', module)
  .addDecorator(story => (
      <MemoryRouter initialEntries={['/']}>{story()}</MemoryRouter>
  ))
  .add('normal', () => <Logo />)

Вы можете прочитать полный пример здесь: https://blog.hichroma.com/graphql-react-tutorial-part-5-6-ac36b6962a8a

shilman 14 апр. 2017

👍94 🎉28 ❤21 🚀2

Все 13 Комментарий

Вы должны заключить свою историю в MemoryRouter используя функцию addDecorator . Вот отрывок:

storiesOf('Logo', module)
  .addDecorator(story => (
      <MemoryRouter initialEntries={['/']}>{story()}</MemoryRouter>
  ))
  .add('normal', () => <Logo />)

Вы можете прочитать полный пример здесь: https://blog.hichroma.com/graphql-react-tutorial-part-5-6-ac36b6962a8a

shilman 14 апр. 2017

👍94 🎉28 ❤21 🚀2

См. Этот комментарий здесь, если вы хотите, чтобы ссылки для активации действий Storybook: https://github.com/storybooks/react-storybook/issues/485#issuecomment -294105214

nathancahill 14 апр. 2017

👍2

Искал эту ошибку и с трудом нашел эту проблему, потому что она была размещена в изображении. Вставьте текст сейчас, чтобы людям было легче его найти в будущем:

Не удается прочитать "историю" свойства undefined
TypeError: невозможно прочитать историю свойства undefined
в Link.render (http: // localhost: 9001 / static / preview.bundle.js: 52878: 35)
по адресу http: // localhost : 9001 / static / preview.bundle.js: 43410: 21
в measureLifeCyclePerf (http: // localhost: 9001 / static / preview.bundle.js: 42690: 12)
в ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (http: // localhost: 9001 / static / preview.bundle.js: 43409: 25)
в ReactCompositeComponentWrapper._renderValidatedComponent (http: // localhost: 9001 / static / preview.bundle.js: 43436: 32)
в ReactCompositeComponentWrapper.performInitialMount (http: // localhost: 9001 / static / preview.bundle.js: 42976: 30)
в ReactCompositeComponentWrapper.mountComponent (http: // localhost: 9001 / static / preview.bundle.js: 42872: 21)
в Object.mountComponent (http: // localhost: 9001 / static / preview.bundle.js: 4438: 35)
в ReactDOMComponent.mountChildren (http: // localhost: 9001 / static / preview.bundle.js: 42241: 44)
в ReactDOMComponent._createInitialChildren (http: // localhost: 9001 / static / preview.bundle.js: 40403: 32)

su-narthur 18 авг. 2017

👍13

Я получаю указанную ниже ошибку при использовании MemoryRouter , и кажется, что MemoryRouter выходит как undefined .

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
    at invariant (http://localhost:6006/static/preview.bundle.js:2056:15)
    at createFiberFromElementType (http://localhost:6006/static/preview.bundle.js:27773:5)
    at createFiberFromElement (http://localhost:6006/static/preview.bundle.js:27718:15)
    at reconcileSingleElement (http://localhost:6006/static/preview.bundle.js:28966:19)
    at reconcileChildFibers (http://localhost:6006/static/preview.bundle.js:29065:35)
    at reconcileChildrenAtPriority (http://localhost:6006/static/preview.bundle.js:29715:30)
    at reconcileChildren (http://localhost:6006/static/preview.bundle.js:29706:5)
    at finishClassComponent (http://localhost:6006/static/preview.bundle.js:29842:5)
    at updateClassComponent (http://localhost:6006/static/preview.bundle.js:29814:12)
    at beginWork (http://localhost:6006/static/preview.bundle.js:30193:16)

Есть идеи, что может происходить?

oyeanuj 9 окт. 2017

Привет @oyeanuj ,
Есть новости об этом? У меня возникают похожие проблемы при использовании Route .

aperkaz 13 нояб. 2017

@aperkaz Я включил эти компоненты в Storybook :( Я тоже буду ждать решения ..

oyeanuj 15 нояб. 2017

👍3

Вы можете проверить, какую версию реактивного маршрутизатора вы используете.

Решение от @shilman выше работает с

donpinkus 13 янв. 2018

Для реактивного маршрутизатора 3:

// ...
import { Router, Route } from 'react-router';
import createMemoryHistory from 'react-router/lib/createMemoryHistory';

storiesOf('Foo', module)
  .addDecorator(story => (
    <Router history={createMemoryHistory('/')}>
      <Route path="/" component={() => story()} />
    </Router>
  ))
  .add('Default', () => <Foo />);

sthzg 4 мая 2018

👍6 🎉2

Полученный ответ отлично работает, но я получаю

Uncaught ReferenceError: ___loader is not defined

Любая помощь с этой ошибкой

iwarner 11 мая 2018

👍3

Для тех, кто приземлится здесь в будущем после того, как погуглил и вырвал волосы, позвольте мне, возможно, сэкономить вам немного времени.

В проекте, над которым я работал, было несовпадение версий между react-router (которое было в "^ 4.1.1" в package.json) и react-router-dom (которое было в "next").

В моем случае это вызвало проблему из-за того, что React изменил способ работы this.context , а react-router-dom последовал его примеру. Это закончилось тем, что мой <Link /> пытался извлечь контекст с помощью метода, которого еще не было, и выдавал исключительно бесполезный "Вы не должны использовать вне" ошибка.

Я исправил это, заменив "react-router-dom": "next" на "react-router-dom": "^4.1.1" .