javascript - 有没有办法将函数重写为类代码？

Question

我有这个代码

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

const content = useRef(null);

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

我可以在类组件中重写它吗？（如何将此功能代码重写为类组件反应代码？）

export default class Accordion extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      setActive,
      setActiveState
    }
  }

  toggleAccordion() {
    setActiveState(setActive )
  }
}

我如何 setActive 和 setActiveState 来打开或关闭？

标签： javascriptreactjs

Answer 1

使用类组件时，通过 setState 函数来更新状态。将一个对象传递给它，其中可以添加所有需要更新的状态变量，然后更新这些状态变量。

export default class Accordion extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          setActive:"",
          setHeight:"0px"
        }
      }
    
      toggleAccordion() {
        let newState = {...this.state,
        setActive:this.state.setActive === "" ? "active" : "",
        setHeight:this.state.setActive === "active" ? "0px" : `${content.current.scrollHeight}px`}
        this.setState(newState);
      }
}