reactjs - 如何使用 React 在类组件中编写此代码

Question

这段代码使用反应钩子写在函数组件中，我可以使用类组件来编写这段代码，但我不明白这怎么可能，因为反应钩子只在函数组件中使用。

谁能帮助我怎么可能

import React, { useState, useRef } from "react";

function Accordion(props) {
    const [setActive, setActiveState] = useState("");
    const [setHeight, setHeightState] = useState("0px");

    const content = useRef(null);

    function toggleAccordion() {
        setActiveState(setActive === "" ? "active" : "non-active");
        console.log(content);
        setHeightState(setActive === "active" ? "0px" : `${content.current.scrollHeight}px`);
      }

 return (
   <div className="accordion__section">
     <button className={`accordion ${setActive}`} onClick={toggleAccordion}>
       <div className="accordion__title"
        dangerouslySetInnerHTML={{ __html: props.title }}
       />
     </button>
     <div ref={content} style={{ maxHeight: `${setHeight}` }}  className="accordion__content">
       <div
         className="accordion__text"
         dangerouslySetInnerHTML={{ __html: props.content }}
       />
     </div>
   </div>
 );
}

export default Accordion;

标签： reactjsreact-hooks

Answer 1

class Accordion extends React.Component {
  state = {
    active: '',
    height: '0px',
  }

  content = React.createRef(null);

  toggleAccordion = () => {
    this.setState({
      active: this.state.active === "" ? "active" : "non-active",
      height: this.state.active === "active" ? "0px" : `${this.content.current.scrollHeight}px`
    })
  }

  render() {
    return (
        <div className="accordion__section">
        <button className={`accordion ${this.state.active}`} onClick={this.toggleAccordion}>
          <div className="accordion__title"
          dangerouslySetInnerHTML={{ __html: this.props.title }}
          />
        </button>
        <div ref={content} style={{ maxHeight: this.state.height }}  className="accordion__content">
          <div
            className="accordion__text"
            dangerouslySetInnerHTML={{ __html: this.props.content }}
          />
        </div>
      </div>
    )
  }
}