React 属性在类型"IntrinsicAttributes"(自定义钩子)上不存在

Question

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

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;

然后我在另一个文件(按钮页面(中调用它：

const ProfileDataPage = () => {
const { ModalComponent, modalOpen, setModalOpen } = useModal();
return (
<ButtonAccentPrimary tabIndex={0} onClick={() => setModalOpen(true)}>
some button text
</ButtonAccentPrimary>

<ModalComponent modalOpen={modalOpen} onClose={() => setModalOpen(false)}>
<myPage />
</ModalComponent>
);
};

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

实际行为：当我进入 ButtonPage 时，模态已经打开，我无法关闭它。

我应该指出错误发生在模态组件上

Answer 1

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

这里的问题似乎是{ children }包含您传递给ModalComponent的所有道具，您可以尝试只使用儿童道具吗，如下所示：

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