javascript - 如何将基于 React 类的组件转换为函数式组件？

Question

这是我想要将其转换为功能组件的轮播滑块的基于 React“类”的组件的代码，但我不明白如何。

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";

export default class extends React.Component {
  render() {
    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 ▼&quot;}
                      readLessText={"Read less ▲&quot;}
                      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 ▼&quot;}
                      readLessText={"Read less ▲&quot;}
                      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 ▼&quot;}
                      readLessText={"Read less ▲&quot;}
                      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>
    );
  }
}

标签： javascriptnode.jsreactjsreact-native

Answer 1

函数式组件只是一个返回一些 jsx 的函数，所以函数的基本格式应该是这样的：

const Name = (props) => {
 return (
   <div>Your jsx</div>
)
}

我很快将您的功能更改为一个功能，不确定这是否就是您所需要的？您在更改 Web 组件时是否遇到错误？

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";

const newComp = props => {
    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 newComp

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>