Storybook: Komponen dengan router reaksi

Dibuat pada 14 Apr 2017 · 13Komentar · Sumber: storybookjs/storybook

Bagaimana saya bisa menggunakan buku cerita dengan komponen yang menggunakan router reaksi?

Contoh komponen

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

Kesalahan

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

Sumber

garmjs

👍2

Komentar yang paling membantu

Anda harus membungkus cerita Anda dalam MemoryRouter menggunakan fungsi addDecorator . Berikut cuplikannya:

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

Anda dapat membaca contoh lengkapnya di sini: https://blog.hichroma.com/graphql-react-tutorial-part-5-6-ac36b6962a8a

shilman pada 14 Apr 2017

👍94 🎉28 ❤21 🚀2

Semua 13 komentar

Anda harus membungkus cerita Anda dalam MemoryRouter menggunakan fungsi addDecorator . Berikut cuplikannya:

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

Anda dapat membaca contoh lengkapnya di sini: https://blog.hichroma.com/graphql-react-tutorial-part-5-6-ac36b6962a8a

shilman pada 14 Apr 2017

👍94 🎉28 ❤21 🚀2

Lihat komentar ini di sini jika Anda ingin tautan untuk mengaktifkan tindakan Buku Cerita: https://github.com/storybooks/react-storybook/issues/485#issuecomment -294105214

nathancahill pada 14 Apr 2017

👍2

Sedang mencari kesalahan ini, dan kesulitan menemukan masalah ini karena diposting dalam gambar. Menempelkan teks sekarang untuk memudahkan orang menemukan di masa mendatang:

Tidak dapat membaca 'sejarah' properti yang tidak terdefinisi
TypeError: Tidak dapat membaca 'sejarah' properti yang tidak terdefinisi
di Link.render (http://localhost:9001/static/preview.bundle.js:52878:35)
di http://localhost :9001/static/preview.bundle.js:43410:21
di measureLifeCyclePerf (http://localhost:9001/static/preview.bundle.js:42690:12)
di ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (http://localhost:9001/static/preview.bundle.js:43409:25)
di ReactCompositeComponentWrapper._renderValidatedComponent (http://localhost:9001/static/preview.bundle.js:43436:32)
di ReactCompositeComponentWrapper.performInitialMount (http://localhost:9001/static/preview.bundle.js:42976:30)
di ReactCompositeComponentWrapper.mountComponent (http://localhost:9001/static/preview.bundle.js:42872:21)
di Object.mountComponent (http://localhost:9001/static/preview.bundle.js:4438:35)
di ReactDOMComponent.mountChildren (http://localhost:9001/static/preview.bundle.js:42241:44)
di ReactDOMComponent._createInitialChildren (http://localhost:9001/static/preview.bundle.js:40403:32)

su-narthur pada 18 Agu 2017

👍13

Saya mendapatkan kesalahan di bawah ini saat menggunakan MemoryRouter , dan tampaknya MemoryRouter keluar sebagai 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)

Ada ide apa yang mungkin terjadi?

oyeanuj pada 9 Okt 2017

Halo @oyeanuj ,
Ada berita tentang ini? Saya mendapatkan masalah yang sangat mirip saat menggunakan Route .

aperkaz pada 13 Nov 2017

@aperkaz Saya belum bisa menjalankan ini, jadi tidak termasuk komponen-komponen itu di Buku Cerita :( Saya akan menunggu solusinya juga ..

oyeanuj pada 15 Nov 2017

👍3

Anda mungkin ingin memeriksa versi router reaksi yang Anda gunakan.

Solusi oleh @shilman di atas berfungsi dengan react router 4.1.1 dan @storybook/react v 3.3.8

donpinkus pada 13 Jan 2018

Untuk router reaksi 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 pada 4 Mei 2018

👍6 🎉2

Jawaban yang diterima berfungsi dengan baik, tetapi saya mengerti

Uncaught ReferenceError: ___loader is not defined

Bantuan apa pun dengan kesalahan ini

iwarner pada 11 Mei 2018

👍3

Bagi siapa pun yang mendarat di sini di masa depan setelah googling dan mencabuti rambut, izinkan saya untuk menghemat waktu Anda.

Proyek yang saya kerjakan memiliki ketidakcocokan versi antara react-router (yang berada di "^4.1.1" di package.json), dan react-router-dom , (yang ada di "berikutnya").

Ini menyebabkan masalah dalam kasus saya karena React mengubah cara kerja this.context , dan react-router-dom mengikutinya. Ini berakhir dengan <Link /> mencoba menarik konteks dengan metode yang belum ada, dan melemparkan "Anda tidak boleh menggunakan a di luar" kesalahan.

Saya memperbaikinya dengan mengganti "react-router-dom": "next" untuk "react-router-dom": "^4.1.1" .