如何将基于类的React轮播滑块组件转换为函数式组件？

你原有的类组件为无状态纯渲染组件，未使用类专属的状态、生命周期、this上下文逻辑，转换无需引入额外Hooks，直接调整组件声明结构即可实现功能完全对等的函数式版本。

import React from "react";
import web from "../../image/nisha.jpg";
import web1 from "../../image/Pooja.jpg";
import web2 from "../../image/6547.jpg";
import "../../styles.scss";
import ReactReadMoreReadLess from "react-read-more-read-less";

// 补充组件命名，避免React Devtools中显示为匿名组件
const TestimonialsCarousel = () => {
  // 原render方法内的JSX直接作为函数返回值
  return (
    <div>
      <h1 className="blog_heading">Testimonials</h1>
      <div className="testimonial">
        <div
          id="carouselExampleSlidesOnly"
          className="carousel slide"
          data-ride="carousel"
        >
          <div className="carousel-inner container">
            <div className="carousel-item active">
              <div className="testimonial_content">
                <a href={web}>
                  <img
                    src={web}
                    alt="img"
                    className="rounded-circle img-fluid "
                  />
                </a>
                <h1>Nisha Sinha</h1>

                <p>
                  <sup>
                    <i
                      className="fa fa-quote-left mr-2"
                      style={{ fontSize: "14px", color: "#ffca08" }}
                      aria-hidden="true"
                    ></i>
                  </sup>
                  <ReactReadMoreReadLess
                    charLimit={200}
                    readMoreText={"Read more ▼"}
                    readLessText={"Read less ▲"}
                    readMoreStyle={{ color: "#00ba74", fontSize: "15px" }}
                  >
                    It's a big thanks for helping me a lot in achieving my
                    goal of JRF. All the lectues were so helpful and i really
                    learned from basic to the top and my doubts got cleared
                    whenever needed and really all the faculties helped with
                    quality videos ”
                  </ReactReadMoreReadLess>
                </p>
              </div>
            </div>
            <div className="carousel-item">
              <div className="testimonial_content">
                <a href={web1}>
                  <img
                    src={web1}
                    alt="img"
                    className="rounded-circle img-fluid "
                  />
                </a>
                <h1 className="my-2">Pooja Dhayal</h1>

                <p>
                  <sup>
                    <i
                      className="fa fa-quote-left mr-2"
                      style={{ fontSize: "14px", color: "#ffca08" }}
                      aria-hidden="true"
                    ></i>
                  </sup>
                  <ReactReadMoreReadLess
                    charLimit={200}
                    readMoreText={"Read more ▼"}
                    readLessText={"Read less ▲"}
                    readMoreStyle={{ color: "#00ba74", fontSize: "15px" }}
                  >
                    Dive to learn helped me to achieve my goals.I cleared UGC
                    NET exam in December ”
                  </ReactReadMoreReadLess>
                </p>
              </div>
            </div>
            <div className="carousel-item">
              <div className="testimonial_content">
                <a href={web2}>
                  <img
                    src={web2}
                    alt="img"
                    className="rounded-circle img-fluid "
                  />
                </a>
                <h1 className="my-2">Parul</h1>

                <p>
                  <sup>
                    <i
                      className="fa fa-quote-left mr-2"
                      style={{ fontSize: "14px", color: "#ffca08" }}
                      aria-hidden="true"
                    ></i>
                  </sup>
                  <ReactReadMoreReadLess
                    charLimit={200}
                    readMoreText={"Read more ▼"}
                    readLessText={"Read less ▲"}
                    readMoreStyle={{ color: "#00ba74", fontSize: "16px" }}
                  >
                    Hurreh!!!Finally, i got my JRF.Thank u so much Dive to
                    learn faculties.your video 
                    ”
                  </ReactReadMoreReadLess>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default TestimonialsCarousel;

转换核心要点 #

• 移除原类组件的React.Component继承声明，替换为命名函数定义，无外部props传入时函数不需要设置参数。
• 原类中render方法包裹的JSX内容直接作为函数返回值，无需额外包裹逻辑。
• 轮播交互完全依赖Bootstrap原生data属性驱动，不需要通过React状态管理轮播进度，转换后功能与原类组件完全一致。

• 可选优化：你当前的3条评价卡片为重复JSX结构，可将评价数据抽为独立配置数组放在组件外部，通过循环渲染减少冗余代码，仅给第一条轮播项补充active类即可，无需重复书写相同的结构代码。

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