组件的子项未显示

Question

我正在尝试使用ReactJS构建Flip卡，该卡具有另外2个内部组件：Frontside和BackSide。这些组件应具有子项，例如BackgroundCard或Sectiond Card。当我测试组件时，屏幕上什么都没有，控制台中也没有错误！

FlipContent.js

function FlipContent() {
    const [setFront, setFrontState] = useState(true);
    const [setBack, setBackState] = useState(false);
    const [setFlipped, setFlippedState] = useState("");


    function FlippingCard() {

        setFrontState(setFront === true ? false : true);
        setBackState(setBack === false ? true : false);
        setFlippedState(setFlipped === "" ? "flipped" : "");

    }



    return (

        <div className={`flip-content ${setFlipped}`} onClick={FlippingCard} >
            <div className="flip-content-container" style={{ cursor: "pointer" }}>
                {setFront ? <FrontSide></FrontSide> : null}
                {setBack ? <BackSide> </BackSide> : null}
            </div>
        </div>
    );

}

并且对于FrontSide / BackSide与此代码相同

function FrontSide({ children }) {

    return (

        <div className="flip-content-front">
            <div style={{ cursor: "pointer" }}>
                {children}
            </div>
        </div>
    );

}

以及这里我要如何预览组件的方法

function FlipPreview() {
    return (
        <Column>
            <Row className={css(styles.title)} wrap flexGrow={1} horizontal="space-between" breakpoints={{ 768: 'column' }}>
                Accordion <br></br>
            </Row>
            <FlipContent>
                <FrontSide>
                    <CardBackgroundComponent title="Testing" image={image}></CardBackgroundComponent>
                </FrontSide>
                <BackSide>
                    <SectionedCardComponent
                        title="Notarum Black"
                        content="Powerful and reliable, this 15” HD laptop will not let you down. 256GB SSD storage, latest gen."
                        link=""
                        linkDescription="Add To Cart"
                    />
                </BackSide>
            </FlipContent>
        </Column>
    );
}

Answer 1

我认为您尚未在组件FrontSide，BackSide中插入任何内容>

   <div className={`flip-content ${setFlipped}`} onClick={FlippingCard} >
      <div className="flip-content-container" style={{ cursor: "pointer" }}>
        {setFront ? <FrontSide> It's front side </FrontSide> : null}
        {setBack ? <BackSide> It's back-side </BackSide> : null}
       </div>
    </div>