Javascript 呈现JSX.Element或HtmleElement反应类型脚本的数组

我目前正在为自定义引导卡创建一个卡包装器。我正试图让开发人员能够根据需要动态渲染卡正面和背面的元素。这就是我目前所拥有的

从“React”导入React，{useState，ReactElement}； 从“react bootstrap”导入{Card，ListGroup}； 接口侧{ imgSrc？：字符串； 标题？：字符串； 文本？：字符串； body？：HTMLElement | JSX.Element[]； } 接口CCardProps{ 类名？：字符串； 正面？：侧面； 背面？：侧面 } const CCard:React.FC={className，front={}，back=front}=>{ const[cardValue，setCardValue]=useStatefront； 回来 cardValue==front？setCardValueback:setCardValuefront}style={{{width:19rem，minHeight:'26rem'}}> {cardValue.imgSrc&&} {cardValue.title&&{cardValue.title} {cardValue.text&&{cardValue.text} {cardValue.body&&cardValue.body.length>0&&cardValue.body.mapitem，索引=> //我在这里干什么？ } }; 出口默认CCard； //示例使用

---

body可以是HTML元素或etc，如果我想加入一个或其他元素，还可以是其他JSX元素。我现在不知道如何用一个键动态映射这两个。任何帮助都将不胜感激。

事实证明我很笨，数组中已经填充了元素而不是值，所以我不需要映射

cardValue==前面？setCardValueback:setCardValuefront}style={{{width:19rem，minHeight:'26rem'}> {cardValue.imgSrc&&} {cardValue.title&&{cardValue.title} {cardValue.text&&{cardValue.text} {cardValue.body}

---

映射值，而不是元素孩子们

是否{cardValue.body}不起作用？出于某种原因，将键放入CCard.body初始化中{cardValue.body}有时对我大喊大叫，有时则不起作用。我很困惑。