React Carousel.Item 未呈现

Question

我使用 react-bootstrap 轮播。通常，如果我在 Carousel 中调用 Carousel.Item，一切正常。但是，当我将 Carousel.Item 包含在自定义组件中时，react-bootstrap 轮播无法找到 Carousel.Item，因此不呈现任何内容。我已尝试将 3 Carousel.Item 放入此推荐的旋转木马中，但它有效。我只是希望通过使用 Carousel.Item 创建一个证明组件并重新使用它来让事情看起来更好。

export const Testimonial = () => {

    return (
        <Row>
            <Col lg={8} sm={12} md={12} className="m-auto">
                <Carousel>
                    <TestimonialItem/>
                    <TestimonialItem/>
                    <TestimonialItem/>
                </Carousel>
            </Col>
        </Row>
    )
}

const TestimonialItem = () => {
    return (
        <Carousel.Item >
            <Row>
                <Col lg={12} sm={12}>
                    <div class="testimonial-content style-2">
                        <div class="author-info ">
                            <div class="author-img">
                                <img src={ath1} alt="" class="img-fluid" />
                            </div>
                        </div>

                        <p><Icofont icon="icofont-quote-left" class="icofont icofont-quote-left"></Icofont>They is a great platform to anyone like who want to start buisiness but not get right decision. It’s really great placefor new to start the buisness in righ way! <i class="icofont icofont-quote-right"></i></p>
                        <div class="author-text">
                            <h5>Marine Joshi</h5>
                            <p>Senior designer</p>
                        </div>
                    </div>
                </Col>
            </Row>
        </Carousel.Item>
    )
}

Answer 1

您需要在 Carousel.Item

上传递道具

因此，Carousel.Item 看起来像

请看我的示例代码

import React from 'react';
import { Row, Col, Carousel } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.css";

const Testimonial = () => {

  return (
      <Row>
          <Col lg={8} sm={12} md={12} className="m-auto">
              <Carousel>
                  <TestimonialItem/>
                  <TestimonialItem/>
                  <TestimonialItem/>
              </Carousel>
          </Col>
      </Row>
  )
}

const TestimonialItem = (props) => {
  const ath1 = "https://cdn.pixabay.com/photo/2021/07/21/08/33/lavenders-6482579_960_720.jpg";
  return (
      <Carousel.Item {...props}>
          <Row>
              <Col lg={12} sm={12}>
                  <div class="testimonial-content style-2">
                      <div class="author-info ">
                          <div class="author-img">
                              <img src={ath1} alt="" class="img-fluid" />
                          </div>
                      </div>

                      <p>
                        {/* <Icofont icon="icofont-quote-left" class="icofont icofont-quote-left"></Icofont> */}
                        They is a great platform to anyone like who want to start buisiness but not get right decision. It’s really great placefor new to start the buisness in righ way! <i class="icofont icofont-quote-right"></i></p>
                      <div class="author-text">
                          <h5>Marine Joshi</h5>
                          <p>Senior designer</p>
                      </div>
                  </div>
              </Col>
          </Row>
      </Carousel.Item>
  )
}

export default Testimonial;

React Carousel.Item 未呈现

React Carousel.Item not rendered

javascript

reactjs

react-bootstrap