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 钩子。
function FilterMobile() {
const [opened, setOpen] = React.useState(false);
const closed = !opened;
const toggleMenu = () => setOpen(isOpened => !isOpened);
return (
<>
{/* Use it as you want */}
</>
);
}
推荐阅读
- numpy - 大高斯分布的稳定采样
- c# - 当 ASP.NET Core 应用程序关闭时,如何正确、安全地处理在容器中注册的单例实例
- python - 如何将 .png 文件转换为多部分文件?
- .htaccess - Apache mod_rewrite RewriteRule 未被拾取
- c++ - 使用基类对象调用派生类函数
- xamarin - Xamarin Live Player 无法连接 - 不断重置地址
- reactjs - 将虚拟钢琴与 midi-Keyboard 链接
- c++ - 对内联行为 C++ 的困惑
- powershell - 将某些特定文件从文件夹结构移动到另一个具有相同目录结构的文件
- c# - 使用 TFS 使用 GIT rest API