Storybook: مكون مع جهاز التوجيه المتفاعل

تم إنشاؤها على ١٤ أبريل ٢٠١٧ · 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 في ١٤ أبريل ٢٠١٧

👍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 في ١٤ أبريل ٢٠١٧

👍94 🎉28 ❤21 🚀2

انظر هذا التعليق هنا إذا كنت تريد روابط لإجراءات Fire Storybook: https://github.com/storybooks/react-storybook/issues/485#issuecomment -294105214

nathancahill في ١٤ أبريل ٢٠١٧

👍2

كان يبحث عن هذا الخطأ ، وواجه صعوبة في العثور على هذه المشكلة لأنه تم نشرها في صورة. لصق النص الآن لتسهيل عثور الأشخاص عليه في المستقبل:

لا يمكن قراءة خاصية "التاريخ" من غير معرف
TypeError: لا يمكن قراءة الخاصية "history" من undefined
في Link.render (http: // localhost: 9001 / static / preview.bundle.js: 52878: 35)
على http: // localhost : 9001 / static / preview.bundle.js: 43410: 21
في MeasLifeCyclePerf (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 في ١٨ أغسطس ٢٠١٧

👍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 في ٩ أكتوبر ٢٠١٧

مرحبا oyeanuj ،
أي خبر عن هذا؟ أواجه مشكلات مشابهة جدًا عند استخدام Route .

aperkaz في ١٣ نوفمبر ٢٠١٧

aperkaz لم أتمكن من تشغيل هذا حتى الآن ، لذا لم يتم تضمين تلك المكونات في Storybook :( سأنتظر الحل أيضًا ..

oyeanuj في ١٥ نوفمبر ٢٠١٧

👍3

قد ترغب في التحقق من إصدار جهاز التوجيه الذي تستخدمه.

الحل بواسطة shilman أعلاه يعمل مع جهاز التوجيه 4.1.1 و @ storybook / رد الفعل v 3.3.8

donpinkus في ١٣ يناير ٢٠١٨

لجهاز التوجيه 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 في ٤ مايو ٢٠١٨

👍6 🎉2

الإجابة السريعة تعمل بشكل رائع ، لكني أحصل عليها

Uncaught ReferenceError: ___loader is not defined

أي مساعدة في هذا الخطأ

iwarner في ١١ مايو ٢٠١٨

👍3

بالنسبة لأي شخص يهبط هنا في المستقبل بعد البحث في googling وتمزيق الشعر ، اسمح لي ربما بتوفير بعض الوقت لك.

المشروع الذي كنت أعمل عليه يحتوي على نسخة غير متطابقة بين react-router (الذي كان في "^ 4.1.1" في package.json) ، و react-router-dom ، (الذي كان في "التالي").

تسبب هذا في مشكلة في حالتي بسبب تغيير React للطريقة التي يعمل بها this.context والبدلة التالية react-router-dom . انتهى الأمر بمحاولتي <Link /> سحب السياق بطريقة لم تكن موجودة بعد ، وإلقاء الأمر غير المفيد بشكل استثنائي "يجب ألا تستخدم خارج أ" خطأ.

لقد أصلحته عن طريق تبديل "react-router-dom": "next" لـ "react-router-dom": "^4.1.1" .