组件的子项未显示
组件的子项未显示
提问于 2020-01-07 15:04:58
我正在尝试建立一个与ReactJS的翻转卡，里面有其他2个组件是:前端和BackSide。这些组件应该具有子组件，如BackgroundCard或Sectioned。当我测试该组件时，屏幕上没有显示任何内容，控制台中也没有错误！
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>
);
}对于前端/后端，与以下代码相同
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>
);
}回答 1
Stack Overflow用户
发布于 2020-01-07 15:15:45
我想您还没有在两个组件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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59631010
复制相关文章
相似问题
腾讯云开发者
