reactjs - 有条件地将 props 传递给带有 typescript 组件的 React

Question

//This component is as same as index.js in react
import * as React from "react";
import ReactDOM from "react-dom";
import Card from "./components/Cards/Card";
import ItemCard from "./components/Cards/ItemCard/ItemCard";

const OrderTracking: React.FC = () => {
    return (
        <Card>
            <ItemCard doesBadge={true} titleCard={'Square Card'} btnText={'Details'} progressPercentage={'30%'} progressStepName={'ha'} isReady={false} />
        </Card>
    )
};
export default OrderTracking;

if (document.getElementById("order-tracking")) {
    ReactDOM.render(
        <OrderTracking/>,

        document.getElementById("order-tracking")
    );
}

//my Card component
import * as React from 'react';
import CardClasses from './Card.module.css';

interface CartProps {
    children: React.ReactNode
}

const Card: React.FC<CartProps> = props => {

    return (
        <div className={CardClasses.card__container}
        >
            {props.children}
        </div>
    );
};

export default Card;




//Item card component
import React from 'react';
import ItemCardClasses from './ItemCard.module.css';
import Button from '../../Buttons/Buttons';
import ProgressBar from "../../ProgressBars/ProgressBar/ProgressBar";
import TextItem from "./TextItem/TextItem";

interface ItemCardProps {
    doesBadge: boolean;
    //  imgSource:string;
    titleCard: string;
    btnText: string;
    progressPercentage: string;
    progressStepName: string;
    isReady: boolean;
}

const ItemCard: React.FC<ItemCardProps> = props => {

    return (
        <div className={ItemCardClasses.itemCard__container}>
            {!props.isReady ? props.doesBadge ?
                <div className={ItemCardClasses.badgeContainer}>
                    <span>بررسی تخصصی فایل</span>
                </div> : null : null
            }
            <div className={ItemCardClasses.itemCard__imageContainer}>
                <img src="/images/order-tracking/817720_check_395x512.png" alt={`${props.titleCard} image`}/>
            </div>

            <div className={ItemCardClasses.itemCard__detailsContainer}>
                <h3 className={ItemCardClasses.itemCard__header}>کارت ویزیت مربعی (ابزار طراحی آنلاین)</h3>
                {props.isReady ?
                    <>
                        <ProgressBar progressPercentage={'40%'} progressStepName={'چاپ'}/>
                        <div className={ItemCardClasses.itemCard__btnContainer}>
                            <Button isBoldText={false} btnTitle={'جزییات'} backgroundBtn={'primary'}/>
                        </div>
                    </> : <>
                        <TextItem/>
                    </>
                }
            </div>
        </div>

    );
};


export default ItemCard;

我正在使用对打字稿做出反应，但我遇到了问题。我希望当将 isReady 道具传递到 itemcard 组件时，itemcard 组件不会推动我输入 progressPercentage 和 progressStepName 和 btnText 道具。上面的代码片段显示了我的一些组件。订单跟踪组件与 react 中的 index.js 和 app.js 相同，card 组件是我的 itemscard 组件的容器。

标签： reactjstypescriptinterfacecomponentsreact-typescript