如何将 <Card.Text> 渲染为 <div> 元素而不是 <p> ？

Question

因为<Card.Body>似乎有一个名为which 类型且默认为 的参数。aselementType<div>

https://react-bootstrap.github.io/components/cards/#card-body-props

现在<Card.Text>默认会<p>在我的网站上产生警告，因为我<div>在其中嵌套了元素<Card.Text>

警告：validateDOMNesting(...)：不能显示为<p>

所以基本上有两个问题：

1. 如何更改/设置元素类型Card.Body？以下尝试没有反映在生成的 html 中（使用 Chrome DevTools 检查）：<Card.Body as="p">...</Card.Body>这也没有<Card.Body as="<p>">...</Card.Body>

2. 如何更改 上的元素类型<Card.Text>？

---

这就是我的组件的样子

import React from "react"
import { Link } from "gatsby"
import Img from "gatsby-image"
import Card from "react-bootstrap/Card"
import Tags from "./tags"
import TimeToRead from "./time-to-read"

const Post = ({ title, slug, date, body, fluid, tags, timeToRead }) => {
  return (
    <Card className="mb-3 shadow-lg" bg="concrete" id="hoverable">
      <Link to={slug}>
        <Img
          className="card-image-top"
          style={{ maxHeight: "150px" }}
          fluid={fluid}
        ></Img>
        <Card.ImgOverlay
          style={{
            pointerEvents: "none",
          }}
        >
          <Tags tags={tags} />
        </Card.ImgOverlay>
      </Link>

      <Card.Body>
        <Card.Title>{title}</Card.Title>
        <Card.Subtitle>
          <div className="d-flex justify-content-between">
            <span className="text-info">{date}</span>
            <TimeToRead minutes={timeToRead} />
          </div>
        </Card.Subtitle>
        <hr />
        <Card.Text as="div">{body}</Card.Text>
        <Link
          to={slug}
          className="btn btn-outline-primary float-right text-uppercase"
        >
          Read more
        </Link>
      </Card.Body>
    </Card>
  )
}

export default Post

Answer 1

本质上我也有同样的问题。我在文本中使用了无序列表，<Card.Body>控制台显示以下警告：

validateDOMNesting(...): <ul> cannot appear as descendent of <p>.

将列表内容包装在<div>刚刚添加到警告列表中的列表中。按照上面的建议，我修改了<Card.Text>标签，但如下：

 <Card.Text as="div">

警告消失并且文本呈现。请注意，您必须调整样式，具体取决于样式级联的配置方式。