我设法遵循了一些教程来获得响应式导航栏，但是我认为我使用切换的方式使其变得有点时髦。

我的组件在下面。

export default class navbar extends Component {
    state = {
        on: false,}

    toggle = () => {
        this.setState({
            on: !this.state.on,})
    }

    render() {
        return (
            <nav classname="sm:flex sm:justify-between sm:items-center sm:px-4 sm:py-3">
                <div classname="flex items-center justify-between px-4 py-3 sm:p-0">
                    <div>
                        <img src={require("../images/logo.svg")} alt="Fracture Group Logo" classname="h-5 mb-0"></img>
                    </div>
                    <div class="sm:hidden">
                        <button type="button" class="block text-gray-500 hover:text-white focus:text-white focus:outline-none" onClick={this.toggle}>
                            <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
                                {/* <path v-if="isOpen" fill-rule="evenodd" d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"/> */}
                                <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z" />
                            </svg>
                        </button>
                    </div>
                </div>

                {this.state.on && (
                    <nav classname="px-2 pt-2 pb-4 sm:block sm:flex sm:p-0">
                        <a href="#" classname="block px-2 py-1 text-white font-semibold font-sans rounded hover:bg-gray-800">
                            our listings
                        </a>
                        <a href="#" classname="block mt-1 px-2 py-1 text-white font-semibold font-sans rounded hover:bg-gray-800 sm:mt-0 sm:ml-2">
                            our listings
                        </a>
                        <a href="#" classname="block mt-1 px-2 py-1 text-white font-semibold font-sans rounded hover:bg-gray-800 sm:mt-0 sm:ml-2">
                            our listings
                        </a>
                    </nav>
                )}
            </nav>
        )
    }
}

当我在一个小窗口上打开关闭的菜单时，保持链接出现。当我将其调整为更大的窗口时，它们已按预期移动到位。

当我关闭菜单并移至更大的窗口时，链接不会出现。这是因为我错误地使用了切换状态吗？

此开关确实会按预期打开菜单，但是当菜单未打开时，链接不会出现在较大的屏幕上。除非我已经打开菜单。

有什么想法可以解决这个问题吗？