在故事书预览中定义一个功能组件

Posted 2023-02-19

【中文标题】在故事书预览中定义一个功能组件

【英文标题】：Define a functional component inside storybook preview

【发布时间】：2020-07-10 12:28:21

【问题描述】：

我有一个自定义模态组件作为功能组件和打字稿。这个模态组件通过上下文提供程序公开 api 并访问它们，我正在使用 useContext 钩子。

const  openModal, closeModal  = useContext(ModalContext);

关于我如何使用这个 api 的示例代码：

const TestComponent = () => 
    const  openModal, closeModal  = useContext(ModalContext);
    const modalProps = ; //define some props
    const open = () => 
        openModal(...modalProps);
    
    return (
       <div>
          <Button onClick=open>Open Modal</Button>
       </div>
    )

我将组件包装在我的 ModalManager 中

<ModalManager>
    <TestComponent />
</ModalManager>

这个例子在我的 Modal.stories.tsx 中工作得很好

问题： 但这在我的 Modal.mdx 中不起作用。它说我无法访问功能组件之外的反应挂钩。所以，我需要定义一个类似 TestComponent 的组件来从上下文访问我的模态 api。如何定义它以及在哪里定义它以便下面的代码预览工作？

import 
 Props, Preview, Meta
 from '@storybook/addon-docs/blocks';
<Meta title='Modal' />
<Preview
  isExpanded
  mdxSource=`
    /* source of the component like in stories.tsx */
  `
>
  <ModalManager><TestComponent /></ModalManager>
</Preview>

【参考方案1】：

您可能有一个实用程序 HOC 来在 MDX 文件中呈现它，如下所示

某些 Utils 文件夹中的 HOCComp.tsx

import React,  FunctionComponent, PropsWithChildren  from 'react';

export interface HOCCompProps 
  render(): React.ReactElement;


const HOCComp: FunctionComponent<HOCCompProps> = (props: PropsWithChildren<HOCCompProps>) => 
  const  render  = props;
  return render();
;

export default HOCComp;

内部 MDX 文件

import HOCComp from './HOC';

<HOCComp render=()=>  
    function HOCImpl()
      const [count,setCount] = React.useState(180);
      React.useEffect(() => 
        const intId = setInterval(() => 
          const newCount = count+1;
          setCount(newCount);
        ,1000)
        return () => 
          clearInterval(intId);
        
      )
      return <Text>count</Text>
    
    return <HOCImpl />

/>

【参考方案2】：

我不确定这是破解还是唯一的方法。我在不同的 tsx 文件中创建了 TestComponent，然后将其导入 mdx。它奏效了。