如何使用typescript在reactjs中传递布尔状态

Question

我有两个组件订单.tsx和ModalComponent.tsx..

这是我的订单.tsx代码

// state
const [modal, setModal] = useState(false);
// modal component
<Modal item={dataDetail} showModal={false} />

和我的ModalComponent.tsx代码

import Link from "next/link";
import Image from "next/image";
import bgImg from "./../../../../public/assets/background_card.png";
import { formatRupiah } from "../../../helpers";
import ProductImage from "../../../../public/assets/product-list.jpg";
import styles from "../../../../styles/pages/Order.module.scss";
import moment from "moment";
import { Col, Row, Modal, Form } from "react-bootstrap";
import { useEffect, useState } from "react";
interface ItemProps {
created_at: string;
quantity: number;
total_price: number;
buyer_name: string;
buyer_phone: number;
buyer_email: string;
buyer_address: string;
order_status: string;
}
interface DetailProps {
item: ItemProps;
}
interface ModalProps {
showModal: boolean;
}
export default function ModalComponent(props: {
item: DetailProps;
showModal: ModalProps;
}) {
const { item, showModal } = props;
const modal_order = () => {
return (
<Modal
className={styles.modalContainer}
size="lg"
show={showModal}
// onHide={handleModal}
centered
>

}

这个返回错误

Type 'boolean' is not assignable to type 'ModalProps'.

我的ModalProps有什么问题吗？我是打字的新手。当我试图在react typescript 中制作一个可重复使用的组件时，我遇到了这个错误

Answer 1

由于您定义道具类型的方式，您需要提供如下道具。

<Modal item={{item: dataDetail}} showModal={{showModal: false}} />

或

组织如下界面。

1. 删除DetailProps接口
2. 将ModalProps更改为以下形式

interface ModalProps {
item: ItemProps;
showModal: boolean;
}

3. 将ModalProps定义为道具类型

export default function ModalComponent(props: ModalProps)

4. 按顺序.tsx

<Modal item={dataDetail} showModal={false} />

Answer 2

您正在向showModal传递布尔值，但它需要一个具有showModal属性的对象。你必须更改类型。

建议/良好做法。：使用React.FC<Props>作为组件类型。

interface ModalProps {
item: ItemProps;
showModal: boolean;
}
export default const  ModalComponent: React.FC<ModalProps> = (props)=>{};