![](/img/trans.png)
[英]React forwardRef - Property does not exist on type IntrinsicAttributes
[英]React Property does not exist on type 'IntrinsicAttributes' (custom hook)
我有一個自定義鈎子來顯示模態,但是得到
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;
然后我在另一個文件(buttonPage)中調用它:
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 時,模態已經打開,我無法關閉它。
我應該指出錯誤發生在 ModalComponent 上
const ModalComponent = ({ children }, large, formModal) => {
這里的問題似乎是{ children }
包含您傳遞給ModalComponent 的所有道具,您是否可以嘗試僅使用 children 道具,例如:
const ModalComponent = (children, large, formModal) => {
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.