Javascript 类型'；上不存在React属性；内在的敬意'；（定制挂钩）

我有一个自定义钩子来显示模态，但是

Type '{ children: Element; modalOpen: boolean; onClose: () => void; }' is not assignable to type 'IntrinsicAttributes & { children: any; }'.
  Property 'modalOpen' does not exist on type 'IntrinsicAttributes & { children: any; }'.

我的定制挂钩：

import React, { useState, HTMLProps } from 'react';
import styled from 'styled-components';
import AriaModal from 'react-aria-modal';

type ModalWrapperProps = HTMLProps<HTMLDivElement> & {
  large: boolean;
  formModal?: boolean;
};

const ModalWrapper = styled(ContainerBoxShadow).attrs({ className: 'ModalWrapper' })`
  ${(_: ModalWrapperProps) => ''}
  width: ${props => (props.formModal ? '80vw' : '90vw')};
  max-height: 90vh;
  overflow-x: hidden;
  overflow-y: auto;

  @media ${props => props.theme.devices.medium} {
    width: ${props => (props.large ? '80vw' : '50vw')};
    max-height: 80vh;
  }

  @media ${props => props.theme.devices.large} {
    width: ${props => (props.large ? '80vw' : '40vw')};
  }

  @media ${props => props.theme.devices.laptop} {
    width: ${props => (props.large ? '80vw' : '30vw')};
  }
`;

const ModalCloseButton = styled(ButtonClosePrimary).attrs({ className: 'ModalCloseButton' })`
  margin-bottom: 2rem;
  float: right;
`;

const useModal = () => {
  const [modalOpen, setModalOpen] = useState(false);

  const ModalComponent = ({ children }, large, formModal) => {
    return (
      <AriaModal onExit={setModalOpen(false)} alert focusDialog titleId="modal-title" verticallyCenter>
        <ModalWrapper large={large} formModal={formModal}>
          <div>
            <ModalCloseButton onClick={() => setModalOpen(false)}></ModalCloseButton>
          </div>
          {children}
        </ModalWrapper>
      </AriaModal>
    );
  };

  return {
    ModalComponent,
    modalOpen,
    setModalOpen,
  };
};

export default useModal;

import React，{useState，HTMLProps}来自“React”；
从“样式化组件”导入样式化；
从“react aria modal”导入AriaModal；
键入ModalWrapperProps=HTMLProps&{
大：布尔值；
formModal？：布尔型；
};
const ModalWrapper=styled（ContainerBoxShadow）.attrs（{className:'ModalWrapper'}）`
${（{:ModalWrapperProps）=>'}
宽度：${props=>（props.formModal？'80vw'：'90vw'）；
最大高度：90vh；
溢出x：隐藏；
溢出y：自动；
@媒体${props=>props.theme.devices.media}{
宽度：${props=>（props.large？'80vw'：'50vw'）；
最大高度：80vh；
}
@媒体${props=>props.theme.devices.large}{
宽度：${props=>（props.large？'80vw'：'40vw'）；
}
@媒体${props=>props.theme.devices.laptop}{
宽度：${props=>（props.large？'80vw'：'30vw'）；
}
`;
const ModalCloseButton=styled（ButtonClosePrimary）.attrs（{className:'ModalCloseButton'}）`
边缘底部：2rem；
浮动：对；
`;
const useModal=（）=>{
const[modalOpen，setModalOpen]=useState（false）；
const ModalComponent=（{children}，大，formModal）=>{
返回(
setModalOpen（假）}>
{儿童}
);
};
返回{
模态分量，
莫达洛彭，
setModalOpen，
};
};
导出默认模式；

然后我在另一个文件中调用它（buttonPage）：

const ProfileDataPage=（）=>{
const{ModalComponent，modalOpen，setModalOpen}=useModal（）；
返回(
setModalOpen（真）}>
一些按钮文本
setModalOpen（假）}>
);
};

预期行为：当我进入页面时，让我们称之为ButtonPage，然后单击我的按钮，我的模式应该出现，我应该能够再次关闭它

实际行为：当我进入按钮页面时，模态已经打开，我无法关闭它

我应该指出，错误发生在ModalComponent上

const ModalComponent = ({ children }, large, formModal) => {

这里的问题似乎是

{children}

包含您传递给ModalComponent的所有道具，您是否可以尝试只使用children道具，如中所示：

const ModalComponent = (children, large, formModal) => {

---

我得到以下错误：未捕获不变冲突：对象作为React子对象无效（找到：具有键{modalOpen，onClose，children}的对象）。如果要呈现子对象集合，请改用数组。

const ModalComponent = (children, large, formModal) => {