Question

我有一个自定义的模态组件，作为功能组件和打字稿。这个模态组件通过上下文提供程序公开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中不起作用。它说我无法访问功能组件外部的react挂钩。因此，我需要定义一个类似于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>

Answer 1

我不确定这是黑客还是唯一的方法。我在其他tsx文件中创建了TestComponent，然后将其导入了mdx中。有效。

Answer 2

您可能具有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 个答案: