我构建了一个 React
组件,Toggle Menu
,它由按钮触发。首次打开后我无法看到菜单打开/关闭。有点迷失如何开始解决这个问题...这是我用作引用的示例 How to Build a Sliding Menu Using ReactJS
export default class ToggleMenu extends React.Component {
showRight = () => {
this.right.show();
}
constructor(props) {
super(props);
this.showRight = this.showRight.bind(this);
}
render() {
return (
<div>
<button onClick={this.showRight}>Show Right Menu!</button>
<Menu ref={right => this.right = right} alignment="right">
<MenuItem hash="first-page">First Page</MenuItem>
<MenuItem hash="second-page">Second Page</MenuItem>
<MenuItem hash="third-page">Third Page</MenuItem>
</Menu>
</div>
);
}
}
export default class Menu extends React.Component {
state = {
visible: false,
};
show() {
this.setState({ visible: true });
}
hide() {
this.setState({ visible: false });
}
render() {
const { visible } = this.state;
return (
<div className="menu">
{
visible &&
<div className={this.props.alignment}>{this.props.children}</div>
}
</div>
);
}
}
最佳答案
通过将 State 移动到主 ToggleMenu 中,您可以让该组件保持菜单的可见性。
class ToggleMenu extends React.Component {
constructor(props) {
super(props);
this.state = {
visible: false
};
this.toggleMenu = this.toggleMenu.bind(this);
}
toggleMenu() {
this.setState({visible: !this.state.visible})
}
render() {
return (
<div>
<button onClick={this.toggleMenu}>Show Right Menu!</button>
{this.state.visible && <Menu alignment="right">
<MenuItem hash="first-page">First Page</MenuItem>
<MenuItem hash="second-page">Second Page</MenuItem>
<MenuItem hash="third-page">Third Page</MenuItem>
</Menu>}
</div>
);
}
}
这使我能够将您的菜单更改为无状态组件:
const Menu = ({alignment, children}) => (
<div className="menu">
<div className={alignment}>{children}</div>
</div>
);
我在这里创建了一个 webpackbin(现在带有动画):https://www.webpackbin.com/bins/-Klh1VM-n4RDCkEbkK67
对于过渡和动画,我建议您查看 https://github.com/reactjs/react-transition-group
关于ReactJs 切换按钮打开菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44341750/