Question

我当前正在为自定义引导卡创建卡包装纸。我正在尝试使开发人员可以根据需要动态地在卡的正面和背面呈现元素。这是我到目前为止所拥有的

import React, { useState, ReactElement } from 'react';
import { Card, ListGroup } from 'react-bootstrap';

interface Side {
  imgSrc?: string;
  title?: string;
  text?: string;
  body?: (HTMLElement | JSX.Element)[];
}

interface CCardProps {
  className?: string;
  front?: Side;
  back?: Side
}

const CCard: React.FC<CCardProps> = ({ className, front = {}, back = front }) => {
  const [cardValue, setCardValue] = useState(front);

  return (
    <Card className={className || ''} onClick={() => cardValue === front ? setCardValue(back) : setCardValue(front)} style={{ width: "19rem", minHeight: '26rem' }}>
      {cardValue.imgSrc && <Card.Img style={{ maxHeight: '100%', maxWidth: '100%' }} variant="top" src={cardValue.imgSrc} />}
      <Card.Body>
        {cardValue.title && <Card.Title>{cardValue.title}</Card.Title>}
        {cardValue.text && <Card.Text>{cardValue.text}</Card.Text>}
        {cardValue.body && cardValue.body.length > 0 && cardValue.body.map((item, index) => 
          // What do I do here?
        }
      </Card.Body>
    </Card>
  )
};

export default CCard;

// Example use
<CCard 
  front={{
    imageUrl: 'cutePuppyPhoto',
    body: [
      <a href="#">Click me!</a>,
    ]
  }}
  back={{
    title: 'This is a title',
    text: 'This is some text',
    body: [
      <Card.Text>Hello There</Card.Text>
    ]
  }}
/>

cardValue.body既可以是HTML元素<a> or <h1>等，也可以是其他JSX元素（如果我想插入<Card.Text>之类的东西。我现在不介绍如何动态映射这两个元素其中的有一个键。我们将不胜感激。

Answer 1

结果我很笨，该数组已经充满了C而不是值，所以我不需要映射。

redis

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

JSX.Element或HTMLElement React Typescript的渲染数组

1 个答案: