react-bootstrap Carousel.Item封装到自定义组件后无法渲染如何解决？

react-bootstrap的Carousel组件内部会直接校验第一层子元素的类型是否为Carousel.Item，当你用自定义组件TestimonialItem包裹Carousel.Item后，Carousel识别到的第一层子元素是TestimonialItem而非它要求的Carousel.Item，因此会跳过渲染，没有内容输出。

同时你现有代码中所有的class属性要改为className，React不识别原生class属性，会导致样式失效。

方案1（更推荐）：自定义组件只负责Item内部内容 #

把Carousel.Item移到外层调用，自定义组件仅封装Item内的业务内容，无需额外透传参数：

// 自定义组件去掉外层Carousel.Item，仅返回内部内容
const TestimonialItem = () => {
    return (
        <Row>
            <Col lg={12} sm={12}>
                <div className="testimonial-content style-2">
                    <div className="author-info ">
                        <div className="author-img">
                            <img src={ath1} alt="" className="img-fluid" />
                        </div>
                    </div>
                    <p><Icofont icon="icofont-quote-left" className="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 buisiness in righ way! <i className="icofont icofont-quote-right"></i></p>
                    <div className="author-text">
                        <h5>Marine Joshi</h5>
                        <p>Senior designer</p>
                    </div>
                </div>
            </Col>
        </Row>
    )
}

// 调用时外层手动套Carousel.Item
export const Testimonial = () => {
    return (
        <Row>
            <Col lg={8} sm={12} md={12} className="m-auto">
                <Carousel>
                    <Carousel.Item>
                        <TestimonialItem/>
                    </Carousel.Item>
                    <Carousel.Item>
                        <TestimonialItem/>
                    </Carousel.Item>
                    <Carousel.Item>
                        <TestimonialItem/>
                    </Carousel.Item>
                </Carousel>
            </Col>
        </Row>
    )
}

方案2：透传所有props到内部Carousel.Item #

如果你希望把Carousel.Item封装到自定义组件内部，只需要把父级Carousel传给自定义组件的所有props透传给内部的Carousel.Item即可：

// 自定义组件接收props并透传给Carousel.Item
const TestimonialItem = (props) => {
    return (
        <Carousel.Item {...props}>
            <Row>
                <Col lg={12} sm={12}>
                    <div className="testimonial-content style-2">
                        <div className="author-info ">
                            <div className="author-img">
                                <img src={ath1} alt="" className="img-fluid" />
                            </div>
                        </div>
                        <p><Icofont icon="icofont-quote-left" className="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 buisiness in righ way! <i className="icofont icofont-quote-right"></i></p>
                        <div className="author-text">
                            <h5>Marine Joshi</h5>
                            <p>Senior designer</p>
                        </div>
                    </div>
                </Col>
            </Row>
        </Carousel.Item>
    )
}

// 调用方式和原有代码完全一致
export const Testimonial = () => {
    return (
        <Row>
            <Col lg={8} sm={12} md={12} className="m-auto">
                <Carousel>
                    <TestimonialItem/>
                    <TestimonialItem/>
                    <TestimonialItem/>
                </Carousel>
            </Col>
        </Row>
    )
}

内容的提问来源于stack exchange，提问作者BestYasuo