Storybook: सीधे एक कहानी के अंदर रिएक्ट हुक का उपयोग नहीं कर सकते

यकीन नहीं होता कि यह एक बग है। मेरा मानना ​​है, और मैं गलत हो सकता है, stories.add का दूसरा तर्क एक घटक को वापस करने के लिए एक फ़ंक्शन की उम्मीद कर रहा है न कि एक वास्तविक रिएक्ट घटक। अपने फंक्शन कंपोनेंट को बाहर तक ले जाने की कोशिश करें, आपको कुछ सफलता मिलनी चाहिए।

उदाहरण

function SomeComponent() {
    const [blah] = React.useState('blah');
    return <div> {blah}</div>;
}
stories.add('BlahComponent', () => <SomeComponent />);

मेरा मानना ​​है, और मैं गलत हो सकता है, stories.add का दूसरा तर्क एक घटक को वापस करने के लिए एक फ़ंक्शन की उम्मीद कर रहा है न कि एक वास्तविक रिएक्ट घटक।

यह वास्तव में AFAIK से कोई फर्क नहीं पड़ता, लेकिन यह हमेशा कोशिश करने लायक है। इसके अलावा, @ अभिमानी क्या त्रुटि फेंकता है? स्टोरीबुक या टाइप सिस्टम?

@Keraito नहीं, मुझे पूरा यकीन है कि त्रुटि सही है।

ऐसा इसलिए है क्योंकि हम फ़ंक्शन को प्रतिक्रिया के संदर्भ से बाहर बुला रहे हैं, उर्फ ​​स्टोरीबुक फ़ंक्शन को इस तरह बुलाएगा:

const element = storyFn();

नहीं

const element = <StoryFn />

काफी संभवत: अगर हम इसे इस तरह शुरू करेंगे कि यह काम कर सके।

अभी @gabefromutah की सलाह ध्वनि है।

यहाँ कोड की वास्तविक लाइन है:
https://github.com/storybooks/storybook/blob/next/app/react/src/client/preview/render.js#L24

यदि कोई इस काम को करने के लिए प्रयोग करना चाहता है, तो यह शुरू करने की जगह है, मुझे लगता है।

@sargant क्या आपके लिए @gabefromutah का सुझाव कार्य करता है?

@ndelangen @gabefromutah का सुझाव मेरी प्रारंभिक "इस कहानी पर काम करता है" उदाहरण के समान है जो मुझे विश्वास है?

इस मामले में कि यह बग नहीं है, फिर भी राज्य के लिए तृतीय-पक्ष प्लगइन्स का उपयोग करने से बचने के लिए यह एक उपयोगी वृद्धि हो सकती है।

काफी संभवत: अगर हम इसे इस तरह शुरू करेंगे कि यह काम कर सके।

@ndelangen को इस बात पर पूरी तरह से यकीन नहीं है कि यह अन्य निश्चित addon-info , जिसे अंतर्निहित रेंडर घटक के प्रॉप्स जैसी जानकारी की आवश्यकता होती है।

हमने एक ही समस्या का अनुभव किया है, और यह एक सरल हैक है जिसे हम इसे हल करने के लिए करते हैं।

stories.add('this story fails', () => React.createElement(() => {
  const [state, setState] = React.useState(5)
  return (
    <button onClick={() => setState(state + 1)}>
      {state}
    </button>
  )
}))

मैं मानता हूं कि यह बिना हैक के मूल रूप से समर्थित होना बेहतर होगा। यदि अनुचर भी सहमत हैं, तो शायद मुझे पीआर PR के साथ आने के लिए कुछ समय मिल सकता है।

@ kevin940726 जो भयानक 7 होगा

मेरे .storybook / config.js के लिए निम्नलिखित जोड़ना मेरे लिए काम किया

addDecorator((Story) => <Story />)

मैंने कुछ इसी तरह से लागू किया है, लेकिन मुझे लगता है कि ऐडऑन का एक गुच्छा टूट जाता है, विशेष रूप से एड-प्रॉप दस्तावेज़ीकरण के लिए एडऑन-जानकारी। मैंने तय किया है कि हुक का उपयोग करना उस जानकारी से अधिक महत्वपूर्ण है (जैसा कि मैं अलग-अलग वैसे भी उत्पन्न करता हूं), लेकिन मुझे संदेह है कि सामान्य रूप से स्टोरीबुक के सभी पर लागू होगा। पता नहीं कैसे आप प्रतिक्रिया के बाहर एपीआई की तरह एक हुक संभाल लेंगे।

मैंने इसे स्रोत कोड में लागू करने की कोशिश की, लेकिन मुझे इसे स्टोरी-एड-एडोन के साथ काम करने के लिए कठिन समय मिल रहा है। मुझे लगता है कि यह एक ब्रेकिंग परिवर्तन होगा क्योंकि यह हर स्नैपशॉट में एक नया मूल नोड उत्पन्न करेगा। जैसा कि हम उपयोगकर्ता को चुनने वाले रेंडरर के नियंत्रण में नहीं होते हैं, हम एक स्तर तक गहरे में गोता नहीं लगा सकते हैं। मुझे लगता है कि हमें अन्य विकल्पों के बारे में सोचना पड़ सकता है, जैसे हम समाधान का दस्तावेजीकरण कर सकते हैं और हो सकता है कि उपयोगकर्ताओं को ऑप्ट-इन करने के लिए कुछ सहायक एपीआई प्रदान करें।

मेरे .storybook / config.js के लिए निम्नलिखित जोड़ना मेरे लिए काम किया

addDecorator((Story) => <Story />)

@emjaksa क्या आप इस का एक टुकड़ा प्रदान कर सकते हैं?

इस समस्या के लिए यह मेरा काम था:

import React, { useState } from 'react';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withInfo } from '@storybook/addon-info';

import SelectField from 'component-folder/SelectField';

/**
 * special wrapper that replaces the `value` and `onChange` properties to make
 * the component work hooks
 */
const SelectFieldWrapper = props => {
  const [selectValue, setValue] = useState('');

  return (
    <SelectField
      {...props}
      value={selectValue}
      onChange={e => {
        setValue(e.target.value);
        action('onChange')(e.target.value);
      }}
    />
  );
};
SelectFieldWrapper.displayName = 'SelectField';

const info = {
  text: SelectField.__docgenInfo.description,
  propTables: [SelectField],
  propTablesExclude: [SelectFieldWrapper]
};

storiesOf('Controls/SelectField', module)
  .addDecorator(withInfo)

  // ... some stories

  // this example uses a wrapper component to handle the `value` and `onChange` props, but it should
  // be interpreted as a <SelectField> component
  .add('change handler', () => 
    <SelectFieldWrapper
      id="employment-status"
      placeholder="some placeholder"
      value={//selectValue}
      onChange={e => {
          // setValue(e.target.value);
      }}
    />, { info });

जैसा कि मैंने बताया कि अभी भी एक वर्कअराउंड है, लेकिन यह काम करता है और info एडऑन को तोड़ता नहीं है। (मैंने अन्य व्यसनों का परीक्षण नहीं किया है)

मेरी जानकारी addon नहीं तोड़ती है बशर्ते मैंने स्टोरी डेकोरेटर को अंतिम रूप से जोड़ा।

import React from 'react'

import { configure, addDecorator } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import { withKnobs } from '@storybook/addon-knobs'

const req = require.context('../src', true, /\.stories\.js$/)

function loadStories() {
  req.keys().forEach(filename => req(filename))
}

addDecorator(
  withInfo({
    header: false,
  }),
)
addDecorator(withKnobs)
addDecorator((Story) => (
    <Story />
))

configure(loadStories, module)

अभी तक एक और समाधान:

मेरे पास एक उपयोगिता घटक है जिसे UseState इस तरह परिभाषित किया गया है:

export const UseState = ({ render, initialValue }) => {
    const [ variable, setVariable ] = useState(initialValue)
    return render(variable, setVariable)
}

और मैं इसे इस तरह कहानियों में उपयोग करता हूं:

.add('use state example', () => (
    <UseState
        initialValue={0}
        render={(counter, setCounter) => (            
            <button onClick={() => setCounter(counter + 1)} >Clicked {counter} times</button>
        )}
    />
)

लेकिन मुझे @ kevin940726 का

मैं राज्य परिवर्तन पर फिर से प्रस्तुत करने के लिए कहानी प्राप्त करने में असमर्थ हूं। फोर्स री-रेंडरिंग भी काम नहीं करता है।

जबकि यह कोड रिएक्ट हुक के लिए अच्छा काम करता है

storiesOf("Dropdowns", module).add("Basic", () => <DropdownBasicStory />);

यह @storybook/addon-info साथ अच्छी तरह से काम नहीं करता है:

यह इस समाधान को अनुपयोगी बनाता है। कोई विचार? स्टोरीबुक 5.1.0-beta.0

@artyomtrityak आप ओवरराइड कर सकते हैं propTables में विकल्प addon-info ? मैं इसे आगामी addon-docs में ठीक से हल करूंगा: https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a

@ शीलमैन में <DropdownBasicStory /> का स्रोत भी शामिल होगा?

@artyomtrityak मैं देखूंगा कि मैं क्या कर सकता हूं

हेलो सब लोग! लगता है कि इस मुद्दे पर हाल ही में बहुत कुछ नहीं हुआ है। यदि अभी भी प्रश्न, टिप्पणी या बग हैं, तो कृपया चर्चा जारी रखने के लिए स्वतंत्र महसूस करें। दुर्भाग्य से, हमारे पास हर मुद्दे पर आने का समय नहीं है। हम हमेशा योगदान के लिए खुले हैं, इसलिए कृपया हमें एक पुल अनुरोध भेजें अगर आप मदद करना चाहते हैं। निष्क्रिय मुद्दों को 30 दिनों के बाद बंद कर दिया जाएगा। धन्यवाद!

अगर किसी और को यह अभी भी मिल रहा है, तो मैंने पाया कि समस्या एक कार्यात्मक घटक में प्रोप प्रकार जोड़ रही है।

const Dropdown = () => (
  // component content
);

Dropdown.propTypes = {
  ...
}

किसी कारण से .propTypes टिप्पणी करने से यह काम करने लगता है। सुनिश्चित नहीं है कि यह एक प्रकार का मुद्दा है जो प्रलेखन के लिए पार्सिंग या कुछ और के साथ है।

हुक के साथ घटकों के स्रोत कोड को प्रदर्शित करने के लिए

function WithState({ children }) {
  const [value, setValue] = React.useState([]);

  return React.cloneElement(children, {
    value,
    onChange: event => setValue(event.target.value),
  });
}

storiesOf(`${__dirname}`, module).add('Basic', () => (
  <WithState>
    <select value="[parent state]" onChange="[parent func]">
      <option value="Australia">Australia</option>
      <option value="Cambodia">Cambodia</option>
    </select>
  </WithState>
));

हेलो सब लोग! लगता है कि इस मुद्दे पर हाल ही में बहुत कुछ नहीं हुआ है। यदि अभी भी प्रश्न, टिप्पणी या बग हैं, तो कृपया चर्चा जारी रखने के लिए स्वतंत्र महसूस करें। दुर्भाग्य से, हमारे पास हर मुद्दे पर आने का समय नहीं है। हम हमेशा योगदान के लिए खुले हैं, इसलिए कृपया हमें एक पुल अनुरोध भेजें अगर आप मदद करना चाहते हैं। निष्क्रिय मुद्दों को 30 दिनों के बाद बंद कर दिया जाएगा। धन्यवाद!

उपरोक्त React.createElement और <Story /> दृष्टिकोण के साथ सावधान रहें, मुझे लगता है कि वे कुछ मामलों में बिल्कुल सही नहीं हैं, क्योंकि आप वास्तव में प्रतिक्रिया घटकों (कहानी घटक) को वापस करने के बजाय फिर से बना रहे हैं रेंडर किए गए तत्व (डॉक्सबुक में story() का उपयोग करते हुए डॉक्स में दिखाए गए अनुसार config.js )।

उदाहरण के लिए, जब आपकी कहानी में Knobs.button जो घटक स्थानीय स्थिति अपडेट को ट्रिगर करता है, तो बटन पर क्लिक करने के बाद, आप वर्तमान घटक की स्थिति को अपडेट करने के बजाय एक नया कहानी घटक बनाने की संभावना रखते हैं।

आप इस सरल कोड स्निपेट के साथ मेरी धारणा को सत्यापित कर सकते हैं, जहां नॉब्स बटन पर क्लिक करने के बाद मूल्य को अपडेट नहीं किया जाएगा।

storiesOf('Test', module).add('with text', () => {
  return React.createElement(() => {
    const [value, setValue] = React.useState(1);

    Knobs.button('Increase', () => setValue(prev => prev + 1));

    return <span>{value}</span>;
  });
});

यह काम करने के लिए, आप कर सकते हैं:

function MyStory() {
  const [value, setValue] = React.useState(1);

  Knobs.button('Increase', () => setValue(prev => prev + 1));

  return <span>{value}</span>;
}

storiesOf('Test', module).add('with text', () => <MyStory />);

इसलिए, वर्कअराउंड के रूप में, मैंने एक आवरण बनाया है:

import {
  DecoratorParameters,
  Story,
  StoryDecorator,
  storiesOf as origStoriesOf,
} from '@storybook/react';

class ReactStory {
  private readonly story: Story;

  constructor(name: string, module: NodeModule) {
    this.story = origStoriesOf(name, module);
  }

  public add(
    storyName: string,
    Component: React.ComponentType,
    parameters?: DecoratorParameters
  ): this {
    this.story.add(storyName, () => <Component />, parameters);
    return this;
  }

  public addDecorator(decorator: StoryDecorator): this {
    this.story.addDecorator(decorator);
    return this;
  }

  public addParameters(parameters: DecoratorParameters): this {
    this.story.addParameters(parameters);
    return this;
  }
}

new ReactStory('Test', module).add('with text', () => {
  const [value, setValue] = React.useState(1);

  Knobs.button('Increase', () => setValue(prev => prev + 1));

  return <span>{value}</span>;
});

वैकल्पिक रूप से, आप रीचार्जिंग ओवरहेड को कम करने के लिए स्टोरीबुक एपीआई की नकल कर सकते हैं, और बाद में स्विच कर सकते हैं जब समस्या ठीक हो गई थी।

export function storiesOf(name: string, module: NodeModule) {
  return new ReactStory(name, module);
}

मैं गलत हो सकता हूं, यदि हां, तो कृपया मुझे बताएं। बहुत सराहना की!

टा-दा !! मैंने अभी-अभी https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.10 पर PR # 7571 युक्त विमोचन किया जो इस मुद्दे को संदर्भित करता है। इसे आजमाने के लिए आज ही अपग्रेड करें!

आप इस @next एनपीएम टैग पर इस प्रीलेरेज को पा सकते हैं।

इस मुद्दे को बंद करना। कृपया पुन: खोलें यदि आपको लगता है कि अभी और कुछ करना बाकी है।

@ शिल्पी धन्यवाद !! क्या आपके पास इसका उपयोग करने का एक कोड स्निपेट उदाहरण है?

@shiranZe सुनिश्चित करें: https://github.com/storybookjs/storybook/blob/next/examples/official-storybook/stories/demo/button.stories.jpg#L26

@ शिल्पी धन्यवाद!
लेकिन अभी भी त्रुटि हो रही है:
रिएक्ट हूक "यूज़स्ट्रेट" को फंक्शन "कंपोनेंट" कहा जाता है, जो न तो रिएक्ट फंक्शन कंपोनेंट है और न ही कस्टम रिएक्ट हुक फंक्शन

@ शिरानज़े आप हाल ही में 5.2-बीटा का उपयोग कर रहे हैं?

@ लक्ष्मण हां ...

कहानियों / घटकों / मेनू / index.js पर मेरा कोड:

const घटक = () => {
const [buttonEl, setButtonEl] = useState (नल)

const handleClick = (event) => {
    console.log('the event', event)
    setButtonEl(event.currentTarget)
}

return (
    <>
        <IconButton iconName={"menu-hamburger"} size="s" onClick={handleClick} color={"midGray"}></IconButton>

निर्यात डिफ़ॉल्ट [readme, घटक];

और कहानियों / घटकों / index.js में:
storiesOf('Components', module) .addDecorator(withKnobs) .add('Text', withReadme(...Menu))

@shiranZe मुझे लगता है कि यह addon-readme साथ एक समस्या है - शायद वहाँ एक मुद्दा दर्ज करें?

आपके उत्तर के लिए धन्यवाद @ शीलमान । मुझे नहीं पता कि क्या समस्या है। मैंने addon-readme बिना कोशिश की और अभी भी वही त्रुटि हो रही है। क्या आपके पास 5.2-बीटा स्टोरी बुक का URL है?
मैंने https://storybooks-official.netlify.com/ (अन्य | डेमो / बटन) पर एक नज़र डालने की कोशिश की
लेकिन मैं वहाँ प्रतिक्रिया हुक के साथ उदाहरण नहीं मिल सकता है।

मेरे पास अभी भी 5.2.0-beta.30 साथ समस्या है और बात मेरे लिए काम किए गए किसी भी प्रकार के वर्कअराउंड की नहीं है, क्योंकि मैं knobs एडऑन का भी उपयोग कर रहा हूं।

@shiranZe हमारी नेटलिफ़ की तैनाती बंद है (cc @ndelangen) लेकिन आप next शाखा पर रेपो की जाँच कर सकते हैं और इसे वहाँ आज़मा सकते हैं।

@ स्रोत सूत्रों का मानना ​​है कि knobs से संबंधित "पूर्वावलोकन हुक" समस्या (cc @Hypnosphi) का इस मुद्दे से कोई लेना-देना नहीं है - केवल एक चीज जो उनके पास है वह है हुक की अवधारणा।

@ शीलमान थैंक्स , मुझे लगता है कि तुम सही हो। Btw मुझे पता चला कि इसे कैसे परीक्षण और त्रुटि से ठीक किया जाए, कस्टम हुक को बदल दिया जाए:

export const useField = (id, updateField) => {
  const onChange = useCallback((event) => {
    const {
      target: { value },
    } = e;
    updateField(id, value);
  };

  return {
    onChange,
  };
}, []);

सेवा

export const useField = (id, updateField) => {
  const onChange = (event) => {
    const {
      target: { value },
    } = e;
    updateField(id, value);
  };

  return {
    onChange,
  };
};

मूल रूप से सिर्फ useCallback का उपयोग यहां से हटा दिया गया है। मुझे यकीन नहीं है कि अगर पहला संस्करण एक वैध हुक था, लेकिन यह काम करता था। जब Hooks can only be called inside the body of a function component कहते हैं या प्रतिक्रिया के कई संस्करण होते हैं, तो यह थोड़ा भ्रमित होता है।

आपके उपरोक्त उदाहरण में, useCallback को निकालने के बाद, क्या आप वास्तव में useField में किसी भी हुक का उपयोग कर रहे हैं? 🤔

ऐसा लगता है कि वहाँ कुछ मुद्दों के साथ हुक का उपयोग कर knobs के साथ है। अगर कोई भी सरल रिप्रो प्रदान कर सकता है, तो मुझे इस पर एक नज़र डालकर खुशी होगी

@shilman क्या आपने मेरे द्वारा पहले पोस्ट किए गए उदाहरण की कोशिश की है? यहाँ स्निपेट है:

storiesOf('Test', module).add('with text', () => {
  return React.createElement(() => {
    const [value, setValue] = React.useState(1);

    Knobs.button('Increase', () => setValue(prev => prev + 1));

    return <span>{value}</span>;
  });
});

पुराने API का उपयोग करते हुए, लेकिन परीक्षण के लिए नवीनतम API में बदलना आसान होना चाहिए। आप मूल पोस्ट से अपेक्षित व्यवहार पा सकते हैं।

@zhenwenc FYI कोड काम करता है, लेकिन react-docgen-typescript-webpack-plugin द्वारा प्रदान किए गए डॉक्स के उपयोग को तोड़ता है।

वर्कअराउंड अन्य पुस्तकालयों के साथ थोड़ा भंगुर और परस्पर विरोधी लगता है। एक विकल्प के रूप में, क्या किसी के पास अनुभव है ?: https://github.com/Sambego/storybook-state

यहाँ उन लोगों के लिए जो त्रुटि संदेश को देखते हैं:

मुझे यह त्रुटि तब हुई जब हुक के साथ एक कार्यात्मक घटक के लिए एक वर्ग घटक को बदलना और useState गलत तरीके से @storybook/addons से आयात हो रहा था। मुझे इसकी आवश्यकता react बजाय @storybook/addons ... ऑटो-आयात विफल होने से हुई।

बस एक स्निपेट के लिए @ बोरियस के अनुरोध का जवाब

मेरे .storybook / config.js के लिए निम्नलिखित जोड़ना मेरे लिए काम किया
addDecorator((Story) => <Story />)

@emjaksa क्या आप इस का एक टुकड़ा प्रदान कर सकते हैं?

diff --git a/.storybook/config.js b/.storybook/config.js
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -1,6 +1,9 @@
-import { configure } from '@storybook/react';
+import { configure, addDecorator } from '@storybook/react';
+import React from 'react';

 // automatically import all files ending in *.stories.js
 configure(require.context('../stories', true, /\.stories\.js$/), module);
+
+addDecorator((Story) => <Story />);

परिणाम (पूरा .storybook/config.js ):

import { configure, addDecorator } from '@storybook/react';
import React from 'react';

// automatically import all files ending in *.stories.js
configure(require.context('../stories', true, /\.stories\.js$/), module);

addDecorator((Story) => <Story />);

मैं अपने स्वयं के घटक में अंदर कहानियों, लेकिन रैपिंग कहानियों काम कर हुक प्रतिक्रिया नहीं यकीन है कि अगर यह सबसे अच्छा तरीका है पाने के लिए है कर रहा हूँ <Story /> घटक के साथ यहाँ काम किया "@storybook/react": "^5.2.6", ।

ऐसा करने से पहले, जब भी मैंने एक नॉब (यानी: बूलियन) को अपडेट किया, तो इसने पहले रेंडर पर काम किया, लेकिन इसके बाद रेंडर करना बंद कर दिया। उपरोक्त समाधान तय है कि Btw, मुझे यकीन नहीं है कि स्टोरीबुक में प्रतिक्रिया हुक का उपयोग करना अच्छा है, बस अगर संभव हो तो सब कुछ नकली करें, यह शायद इस तरह से बेहतर है।

बग का वर्णन करें

एक कहानी में सीधे हुक का उपयोग नहीं किया जा सकता है, Hooks can only be called inside the body of a function component साथ विफल होता है।

प्रजनन करना

उदाहरण कोड:

import React from 'react'

import { storiesOf } from '@storybook/react'

const stories = storiesOf('Hooks test', module)

const TestComponent: React.FC = () => {
  const [state, setState] = React.useState(5)
  return (
    <button onClick={() => setState(state + 1)}>
      {state}
    </button>
  )
}

stories.add('this story works', () => <TestComponent />)

stories.add('this story fails', () => {
  const [state, setState] = React.useState(5)
  return (
    <button onClick={() => setState(state + 1)}>
      {state}
    </button>
  )
})

अपेक्षित् व्यवहार
पहली कहानी ठीक काम करती है, दूसरी कहानी प्रारंभिक रेंडर पर विफल होती है

संस्करणों
@storybook/[email protected]
[email protected]
[email protected]

======================================

कार्यात्मक घटकों को बनाने के लिए तीर फ़ंक्शन का उपयोग न करें।
नीचे दिए गए उदाहरणों में से एक के रूप में करें:

function MyComponent(props) {
  const [states, setStates] = React.useState({ value: '' });

  return (
    <input
      type="text"
      value={states.value}
      onChange={(event) => setStates({ value: event.target.value })}
    />
  );
}

या

//IMPORTANT: Repeat the function name

const MyComponent = function MyComponent(props) { 
  const [states, setStates] = React.useState({ value: '' });

  return (
    <input
      type="text"
      value={states.value}
      onChange={(event) => setStates({ value: event.target.value })}
    />
  );
};

यदि आपको "रेफ" (शायद छोरों में) की समस्या है, तो समाधान फॉरवर्ड का उपयोग करना है ():

// IMPORTANT: Repeat the function name
// Add the "ref" argument to the function, in case you need to use it.

const MyComponent = React.forwardRef( function MyComponent(props, ref) {
  const [states, setStates] = React.useState({ value: '' });

  return (
    <input
      type="text"
      value={states.value}
      onChange={(event) => setStates({ value: event.target.value })}
    />
  );
});

यह MDX में कैसे प्राप्त किया जा सकता है?

@adeelibr https://github.com/storybookjs/storybook/blob/17dcfb84194c9876d4452aae123443f9748f62b6/examples-official-storybook/stories/demo/button.stories.mdx#counter -w

लेकिन अभी भी त्रुटि हो रही है:
रिएक्ट हूक "यूज़स्ट्रेट" को फंक्शन "कंपोनेंट" कहा जाता है, जो न तो रिएक्ट फंक्शन कंपोनेंट है और न ही कस्टम रिएक्ट हुक फंक्शन
https://github.com/storybookjs/storybook/issues/5721#issuecomment -518225880

मैं यह एक ही मुद्दा था। नामांकित कहानी निर्यात को ठीक करना है।

 'रिएक्शन' से आयात प्रतिक्रिया;
 Foo से आयात करें। / .Foo ';

 निर्यात डिफ़ॉल्ट {
 शीर्षक: 'फू';
 };

 Export const बुनियादी = () => <Foo />

डॉक्स का कहना है कि कैपिटलाइज़ेशन की सिफारिश की गई है, लेकिन यदि आप चाहते हैं कि चेतावनी दूर हो जाए तो यह आवश्यक है।

मेरे मामले में, समस्या यह थी कि मैं अपने द्वारा उपयोग किए जा रहे हुक को आयात करना भूल गया था।

मेरे .storybook / config.js के लिए निम्नलिखित जोड़ना मेरे लिए काम किया

addDecorator((Story) => <Story />)

@emjaksa Thanx! स्टोरीबुक पर परीक्षण और ठीक काम v5.3।

मेरे पास एक ही मुद्दा था, मेरे कार्यात्मक प्रतिक्रिया घटक में useState(value) और value ने Knobs से नए मूल्य को फिर से प्रस्तुत नहीं किया, यह मुद्दा उपयोग के कारण होता है:

रिएक्ट डॉक्स से:

काम कर समाधान स्टोरीबुक v5.3:

प्रिव्यू अपडेट करें। js

.storybook/preview.js

import React from 'react'; // Important to render the story
import { withKnobs } from '@storybook/addon-knobs';
import { addDecorator } from '@storybook/react';

addDecorator(withKnobs);
addDecorator(Story => <Story />); // This guy will re-render the story

और main.js को भी अपडेट करें

.storybook/main.js

module.exports = {
  stories: ['../src/**/*.stories.jsx'],
  addons: [
    '@storybook/preset-create-react-app',
    '@storybook/addon-knobs/register', // Attention to this guy
    '@storybook/addon-actions',
    '@storybook/addon-links',
  ],
  webpackFinal: async config => {
    return config;
  },
};

❓
क्या किसी को पता है कि यह आकर्षक डेकोरेटर हुक काम क्यों करता है?

`` `TSX
SomeComponent.decorators = [(कहानी) => ]

@tmikeschu यह इसलिए है क्योंकि <Story /> React.createElement में कोड को लपेटता है जो हुक के लिए आवश्यक है।

@ शिल्पी धन्यवाद!