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

Question

这是我想将其转换为功能组件的轮播 slider 的基于 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 ▼"}
                      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>
    );
  }
}

Answer 1

功能组件只是返回一些 jsx 的 function，因此 function 的基本格式应如下所示：

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

我很快就把你的换成了 function，不确定这是否是你所需要的？ 您在更改 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>

Answer 2

解决方案

对于您当前的实现，仅适用于解释的第 1 点（见下文）。 因此，功能组件应如下所示：

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 () => {
  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>
  );
}

解释

当您想要从 class 组件交换到功能组件时，需要记住一些事项。

1. Change the header from a class header into a function header. 你需要改变这个：

    export default class extends React.Component { render() { return ( //...something ); } }

   对此

   export () => { return ( //...something ); }

2. 如果有的话，更新props的使用。 假设您在组件的某处使用this.props 。 您需要接受props作为功能组件的参数并使用它而不是this.props 。

    export (props) => { console.log(`This is the props: ${props}`); return ( //...something ); }

3. 使用useState挂钩代替this.state和this.setState 。 学到更多

4. 如果您必须使用生命周期函数（ componentDidMount ，...），请考虑了解有关useEffect挂钩的更多信息。 学到更多