Javascript 反应类组件到功能组件

我试图将我的类组件转换为功能组件，但对于如何正确使用toggleMenu有点困惑。我正试图更熟悉只使用功能组件的工作

类组件构建为：

class FilterMobile extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      opened: false,
      closed: true,
    };
    this.toggleMenu = this.toggleMenu.bind(this);
  }

  toggleMenu() {
    const { opened } = this.state;
    this.setState({
      opened: !opened,
      closed: opened,
    });
  }

  render() {
    const { opened } = this.state;

    return (
      <>
        <div>
          <Button onClick={this.toggleMenu} className="full-width filter-dropdown-button">
            <div>
              <span className="bold">Filters</span>
            </div>

            {this.state.opened && <div className="icon tmm-exit" />}
            {this.state.closed && <div className="icon tmm-filter" />}
          </Button>

          <Button className="full-width button-clear-filter">
            Clear <div className="icon tmm-exit" />
          </Button>
        </div>

        {opened && (

          <CollapseContainer>
            <CategoriesCollapseContainer>
              <Collapse
                accordion={true}
                expandIcon={expandIcon}
                className="mobile-collapse"
              >
                {this.props.children}
              </Collapse>
            </CategoriesCollapseContainer>
          </CollapseContainer>
        )}
      </>
    );
  }
}

---

非常感谢您的帮助。

您需要使用react钩子来代替状态变量

---

您应该在打开状态下只使用一个变量，然后计算关闭值； 我还鼓励使用React钩子

function FilterMobile() {
  const [opened, setOpen] = React.useState(false);
  const closed = !opened;
  const toggleMenu = () => setOpen(isOpened => !isOpened);

  return (
    <>
      {/* Use it as you want */}
    </>
  );
}

---

请说明您在将代码转换为功能组件时尝试了什么，以说明您遇到的特定障碍。所以不是免费的代码翻译服务。