需要帮助将道具从父元素传递到子元素以做出反应

Question

我正在使用故事书来测试我正在制作的某些组件，在这种情况下是模态组件，但是我很难让wrapper元素传递“ open”值并回调给子模态。

这是代码：

import { storiesOf } from '@storybook/react';
import React, { FC } from 'react';
import Modal from '.';
import { text, withKnobs } from '@storybook/addon-knobs/react';
import { Button } from '@material-ui/core';

const ModalParent: FC = ({ children }) => {
  const [isOpen, setOpen] = React.useState(false);

  const toggleIsOpen = () => {
    setOpen(!isOpen);
  };

  return <Button onClick={toggleIsOpen}>{children}</Button>;
};

storiesOf('PayTM Components', module)
  .addDecorator(withKnobs as any)
  .add('Modal', () => {
    const paragraph =
      'The structure of a paragraph parallels the structure of an essay in order as well as content. Both contain a coherent argument, supporting evidence/analysis, and a conclusion. Specifically, the contents of a paragraph are as follows: ... The topic sentence is usually the first or second sentence of a paragraph.';

    return (
      <ModalParent>
        <Modal opened={isOpen} toggle={toggleIsOpen}>
          {text('Modal Content', paragraph)}
        </Modal>
      </ModalParent>
    );
  });

但是我得到一个错误，即找不到传递给Modal的'isOpen'和'toggleIsOpen'。我究竟做错了什么？