Storybook: 스토리 내에서 직접 React 후크를 사용할 수 없습니다.

이것이 버그인지 확실하지 않습니다. stories.add 의 두 번째 인수는 실제 React 구성 요소가 아닌 구성 요소를 반환하는 함수를 기대하고 있습니다. 함수 구성 요소를 외부로 이동해보십시오. 성공해야합니다.

예

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

stories.add 의 두 번째 인수는 실제 React 구성 요소가 아닌 구성 요소를 반환하는 함수를 기대하고 있습니다.

AFAIK는 중요하지 않지만 항상 시도해 볼 가치가 있습니다. 또한 @sargant 가 오류를 발생

@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 굉장 할 것입니다 👍

내 .storybook / config.js에 다음을 추가하면 나를 위해 일했습니다.

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

나는 비슷한 것을 구현했지만 많은 애드온, 특히 prop 문서를 출력하기위한 addon-info를 망가 뜨린다 고 생각합니다. 나는 후크를 사용하는 것이 그 정보보다 더 중요하다고 결정했지만 (어쨌든 별도로 생성하므로) 일반적으로 모든 스토리 북에 적용될 것 같지 않습니다. 반응 외부에서 api와 같은 후크를 어떻게 처리할지 모릅니다.

소스 코드에서 구현하려고했지만 storyshot-addon으로 작동하도록 만드는 데 어려움을 겪고 있습니다. 모든 스냅 샷에서 새로운 부모 노드를 생성하므로 이것이 큰 변화라고 생각합니다. 사용자가 선택한 렌더러를 제어 할 수 없기 때문에 한 수준 깊이로 뛰어들 수 없습니다. 솔루션을 문서화하고 사용자가 옵트 인 할 수있는 도우미 API를 제공 할 수있는 등 다른 대안을 생각해야 할 수도 있습니다.

내 .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 애드온을 중단하지 않습니다. (다른 애드온을 테스트하지 않았습니다)

스토리 데코레이터를 마지막에 추가 한 경우 내 정보 애드온이 중단되지 않습니다.

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 의 해결 방법이 가장 좋습니다.

나는 상태 변화에 대한 이야기를 다시 렌더링 할 수 없습니다. 강제 다시 렌더링도 작동하지 않습니다.

이 코드는 React Hooks에서 잘 작동하지만

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

@storybook/addon-info 에서는 잘 작동하지 않습니다.

이로 인해이 해결 방법을 사용할 수 없습니다. 어떤 아이디어? 스토리 북 5.1.0- 베타 .0

@artyomtrityak addon-info 에서 propTables 옵션을 재정의 할 수 있습니까? 다가오는 addon-docs 에서이 문제를 제대로 해결할 것입니다 : https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a

@shilman 에는 <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 /> 접근 방식에주의하십시오. 어떤 경우에는 옳지 않다고 생각합니다. 실제로 반응 구성 요소 (스토리 구성 요소)를 반환하는 대신 다시 만들고 있기 때문입니다. 렌더링 된 요소 (문서에 표시된대로 config.js 스토리 북에서 story() 중)

예를 들어 스토리에 구성 요소 로컬 상태 업데이트를 트리거하는 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>;
});

선택적으로 스토리 북 API를 모방하여 리팩토링 오버 헤드를 줄이고 나중에 문제가 해결되면 다시 전환 할 수 있습니다.

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

내가 틀렸을 수도 있습니다. 그렇다면 알려주세요. 매우 감사!

따다 !! 방금이 문제를 참조하는 PR # 7571이 포함 된 https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.10 을 릴리스했습니다. 지금 업그레이드하여 사용해보세요!

이 프리 릴리즈는 @next NPM 태그에서 찾을 수 있습니다.

이 문제를 마무리합니다. 할 일이 더 많다고 생각되면 다시여십시오.

@shilman 감사합니다 !! 사용 방법에 대한 코드 스 니펫 예제가 있습니까?

@shiranZe sure do : https://github.com/storybookjs/storybook/blob/next/examples/official-storybook/stories/demo/button.stories.js#L26

@shilman 감사합니다!
하지만 여전히 오류가 발생합니다.
React Hook "useState"는 React 함수 컴포넌트 나 커스텀 React Hook 함수가 아닌 함수 "component"에서 호출됩니다.

@shiranZe 최근 5.2 베타를 사용하고 있습니까?

@shilman 맞아요 ...

stories / components / Menu / index.js의 내 코드 :

const 구성 요소 = () => {
const [buttonEl, setButtonEl] = useState (null)

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

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

내보내기 기본값 [readme, 구성 요소];

그리고 stories / components / index.js에서 :
storiesOf('Components', module) .addDecorator(withKnobs) .add('Text', withReadme(...Menu))

@shiranZe 나는 그것이 addon-readme 의 문제라고 생각합니다.

답장을 보내 주신 @shilman 에게 감사드립니다. 그게 문제인지 모르겠어요. addon-readme 없이 시도했지만 여전히 동일한 오류가 발생합니다. 5.2 베타 스토리 북의 URL이 있습니까?
https://storybooks-official.netlify.com/ (other | demo / Button)을 살펴 보려고했습니다.
하지만 반응 후크가있는 예제를 찾을 수 없습니다.

나는 여전히 5.2.0-beta.30 에 문제가 있으며 노브 애드온을 사용하고 있기 때문에 해결 방법이 나에게 효과가 없다는 것입니다.

@shiranZe 우리의 netlify 배포가 꺼져 있지만 (cc @ndelangen) next 브랜치의 저장소를 확인하고 거기에서 시도해 볼 수 있습니다.

@sourcesoft 손잡이 관련 "미리보기 후크"문제 (cc @Hypnosphi)는이 문제와 관련이 없다고 생각합니다. 공통점은 후크 개념뿐입니다.

@shilman 감사합니다, 나는 당신이 옳다고 생각합니다. 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 되거나 여러 버전의 React가있는 경우 약간 혼란 스럽습니다.

위의 예에서 useCallback 제거한 후 실제로 useField 에 후크 등록을 사용 하고 있습니까? 🤔

손잡이가있는 후크를 사용하는 데 문제가있는 것 같습니다. 누구나 간단한 재현을 제공 할 수 있다면 기꺼이 살펴 보겠습니다.

@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 참고로 코드는 작동하지만 react-docgen-typescript-webpack-plugin 렌더링 된 문서 사용이 중단됩니다.

해결 방법은 약간 취약하고 다른 라이브러리와 충돌하는 것처럼 보입니다. 대안으로 누군가 사용 경험이 있습니까? : https://github.com/Sambego/storybook-state

여기에서 오류 메시지를 검색하는 경우 :

클래스 구성 요소를 후크가있는 기능 구성 요소로 변경하고 useState 에서 @storybook/addons 에서 잘못 가져올 때이 오류가 발생했습니다. 나는에서 온 그것을 필요로 react 보다는 @storybook/addons ... 자동 가져 오기가 실패합니다.

스 니펫에 대한 @orpheus 의 요청에 응답

내 .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 })}
    />
  );
};

"ref"(아마 루프에서)에 문제가있는 경우 해결책은 forwardRef ()를 사용하는 것입니다.

// 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 코드

하지만 여전히 오류가 발생합니다.
React Hook "useState"는 React 함수 컴포넌트 나 커스텀 React Hook 함수가 아닌 함수 "component"에서 호출됩니다.
https://github.com/storybookjs/storybook/issues/5721#issuecomment -518225880

나는이 똑같은 문제를 겪고있었습니다. 수정 사항은 명명 된 스토리 내보내기를 대문자로 사용하는 것입니다.

 'react'에서 React 가져 오기;
 './Foo'에서 Foo 가져 오기;

 export default {
 제목 : 'Foo';
 };

 내보내기 const 기본 = () => <Foo />

문서에 따르면 대문자 사용이 권장 되지만 경고를 없애려면 필요합니다.

제 경우 문제는 제가 사용하고있는 후크를 가져 오는 것을 잊었다는 것입니다.

내 .storybook / config.js에 다음을 추가하면 나를 위해 일했습니다.

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

@emjaksa 고맙습니다! Storybook v5.3에서 테스트 및 잘 작동합니다.

동일한 문제가 발생했습니다. 기능적 반응 구성 요소에 useState(value) 있고 value 가 Knobs에서 새 값을 다시 렌더링하지 않았습니다.이 문제는 useState로 인해 발생합니다.

React 문서에서 :

작업 솔루션 Storybook v5.3 :

preview.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 코드를 래핑하기 때문입니다.

@shilman 감사합니다!