为什么react单页导航只能在没有构造函数和状态的组件中工作

Question

我目前正在学习react，我发现了这个很酷的包：https://www.npmjs.com/package/react-single-page-navigation.

我开始使用它，一切都很顺利。然后我想让我的网络应用程序响应，所以我为小屏幕构建了一个移动导航(简单的下拉菜单(。

首先，这个导航也起作用了！下拉列表总是显示的，我可以用它们的引用点击按钮，然后通过平滑的滚动导航到所需的部分。由于下拉菜单的显示和隐藏功能，我添加了一个构造函数，该构造函数具有状态菜单Visible to the mobile navigation Component和两个函数来处理点击"；打开下拉菜单"；按钮，然后单击除下拉项之外的任何其他位置(标准下拉机制(。

这个机制工作得很好，水滴看起来也不错。但是：导航不起作用了。相反，我总是得到"；导航的"；在我的web应用程序的第一部分上下显示一些像素。

这是工作桌面导航组件：

import React, {Component} from 'react';
export default class DesktopNavigation extends Component {
render() {
return (
<nav className={this.props.sticky ? 'navbar navbar--sticky' : 'navbar'} id='mainNav'>
<div className='navbar--logo-holder'>
<img alt='logo' className='navbar--logo'/>
<h1 className={this.props.sticky ? 'navbar--logo-text-sticky' : 'navbar--logo-text'}>Booyar</h1>
</div>
<ul className='navbar--link'>
<div ref={this.props.refs.Home} onClick={() => this.props.goTo('Home')}>
<div className={(this.props.activeElement === 'Home' ? 'active-page ' : '') + (this.props.sticky ? 'navbar--link-item-sticky' : 'navbar--link-item')}>
Home
</div>
</div>
<div ref={this.props.refs.About} onClick={() => this.props.goTo('About')}>
<div className={(this.props.activeElement === 'About' ? 'active-page ' : '') + (this.props.sticky ? 'navbar--link-item-sticky' : 'navbar--link-item')}>
About
</div>
</div>
<div ref={this.props.refs.Services} onClick={() => this.props.goTo('Services')}>
<div className={(this.props.activeElement === 'Services' ? 'active-page ' : '') + (this.props.sticky ? 'navbar--link-item-sticky' : 'navbar--link-item')}>
Services
</div>
</div>
<div ref={this.props.refs.Projects} onClick={() => this.props.goTo('Projects')}>
<div className={(this.props.activeElement === 'Projects' ? 'active-page ' : '') + (this.props.sticky ? 'navbar--link-item-sticky' : 'navbar--link-item')}>
Projects
</div>
</div>
<div ref={this.props.refs.Contact} onClick={() => this.props.goTo('Contact')}>
<div className={(this.props.activeElement === 'Contact' ? 'active-page ' : '') + (this.props.sticky ? 'navbar--link-item-sticky' : 'navbar--link-item')}>
Contact
</div>
</div>
</ul>
</nav>
);
}
}

以下是无法正常工作的移动导航组件：

import React, {Component} from 'react';
import DropdownMenu from "./dropdownMenu";

export default class MobileNavigation extends Component {
constructor(props) {
super(props);
this.state = {
sticky: this.props.sticky
}
}
callbackIsSticky = (isSticky) => {
this.setState({sticky: isSticky})
}
render() {
return (
<nav className={this.state.sticky || this.props.sticky ? "mobile-navbar mobile-navbar-sticky" : "mobile-navbar"} id="mainNav">
<div className="mobile-navbar--logo-holder">
<img alt="logo" className="mobile-navbar--logo"/>
</div>
<DropdownMenu
refs={this.props.refs}
activeElement={this.props.activeElement}
goTo={this.props.goTo}
sticky={this.props.sticky}
callback={this.callbackIsSticky}
/>
</nav>
);
}
}

import React, {Component} from 'react';
/**
* This class represents the dropdown menu in mobile view.
*/
export default class DropdownMenu extends Component {
constructor(props) {
super(props);
this.state = {
menuVisible: false
}
this.handleClick = this.handleClick.bind(this);
this.handleOutsideClick = this.handleOutsideClick.bind(this);
}
handleClick() {
if (!this.state.menuVisible) {
document.addEventListener('click', this.handleOutsideClick, false);
this.props.callback(true);
} else {
document.removeEventListener('click', this.handleOutsideClick, false);
this.props.callback(false);
}
this.setState(stateBefore => ({
menuVisible: !stateBefore.menuVisible,
}));
}
handleOutsideClick(event) {
if (this.node.contains(event.target)) {
return;
}
this.handleClick();
}
render() {
const items =
<div className={'dropdown-items'}>
<button
ref={this.props.refs.Home} onClick={() => this.props.goTo('Home')}
className={(this.props.activeElement === 'Home' ? "active-mobile-page " : "")}>
Home
</button>
<button
ref={this.props.refs.About} onClick={() => this.props.goTo('About')}
className={(this.props.activeElement === 'About' ? "active-mobile-page " : "")}>
About
</button>
<button
ref={this.props.refs.Services} onClick={() => this.props.goTo('Services')}
className={(this.props.activeElement === 'Services' ? "active-mobile-page " : "")}>
Services
</button>
<button
ref={this.props.refs.Projects} onClick={() => this.props.goTo('Projects')}
className={(this.props.activeElement === 'Projects' ? "active-mobile-page " : "")}>
Projects
</button>
<button
ref={this.props.refs.Contact} onClick={() => this.props.goTo('Contact')}
className={(this.props.activeElement === 'Contact' ? "active-mobile-page " : "")}>
Contact
</button>
</div>;
return (
<div className={'dropdown-menu' + (this.state.menuVisible ? ' dropdown-menu-open' : '')}
ref={node => this.node = node}>
<button className={'hamburger hamburger--elastic' + (this.state.menuVisible ? ' is-active' : '')} onClick={this.handleClick} type={'button'}>
<span className="hamburger-box">
<span className={'hamburger-inner' + (this.state.menuVisible || this.props.sticky ? ' hamburger-inner-sticky' : '')}>
</span>
</span>
</button>
{this.state.menuVisible ? items : undefined}
</div>
);
}
}

当然，如react单页导航文档中所述，所有内容都由<ScrollNavigation elements={{Home: {}, About: {}, Services: {}, Projects: {}, Contact: {}}}>...</ScrollNavigation>封装。

我决定是用css和以下类显示移动导航还是桌面导航：

import React, {Component} from 'react';
import MobileNavigation from "./mobileNavigation";
import DesktopNavigation from "./desktopNavigation";
export default class Navigation extends Component {
render() {
return (
<div>
<MobileNavigation
refs={this.props.refs}
activeElement={this.props.activeElement}
goTo={this.props.goTo}
sticky={this.props.isSticky}/>
<DesktopNavigation
refs={this.props.refs}
activeElement={this.props.activeElement}
goTo={this.props.goTo}
sticky={this.props.isSticky}/>
</div>
);
}
}

我希望这是足够的信息。我不喜欢发布我的整个项目，但我认为这没有必要。桌面导航工作正常。移动导航仅在主页部分导航毫米。我认为有一个基本的反应"；事物；导致了我无法理解的行为，因为当我取消注释除呈现方法(以及调用未注释内容的呈现方法中的内容；(之外的所有内容时，移动导航都会工作。

如果您需要更多信息或有进一步的问题，请询问！：(

提前感谢，节日快乐！

Maximotus

Answer 1

好的，所以我的错误是将滚动导航ref={this.props.refs.Home}(等(的引用放在按钮上。不知何故，我误解了react单页导航文档中的说明。ref道具就像"锚点"，所以滚动导航知道在哪里滚动。我在按钮本身添加了这个ref，所以导航只滚动到按钮的位置。

所以我只是把它从按钮上删除了，现在一切都很好(桌面导航也是如此，我想知道为什么它以前也会出现同样的错误(。

<ul className='navbar--link'>
<div onClick={() => this.props.goTo('Home')}>
<div
className={(this.props.activeElement === 'Home' ? 'active-page ' : '') + (this.props.sticky ? 'navbar--link-item-sticky' : 'navbar--link-item')}>
Home
</div>
</div>
<div onClick={() => this.props.goTo('About')}>
<div
className={(this.props.activeElement === 'About' ? 'active-page ' : '') + (this.props.sticky ? 'navbar--link-item-sticky' : 'navbar--link-item')}>
About
</div>
</div>
<div onClick={() => this.props.goTo('Services')}>
<div
className={(this.props.activeElement === 'Services' ? 'active-page ' : '') + (this.props.sticky ? 'navbar--link-item-sticky' : 'navbar--link-item')}>
Services
</div>
</div>
<div onClick={() => this.props.goTo('Projects')}>
<div
className={(this.props.activeElement === 'Projects' ? 'active-page ' : '') + (this.props.sticky ? 'navbar--link-item-sticky' : 'navbar--link-item')}>
Projects
</div>
</div>
<div onClick={() => this.props.goTo('Contact')}>
<div
className={(this.props.activeElement === 'Contact' ? 'active-page ' : '') + (this.props.sticky ? 'navbar--link-item-sticky' : 'navbar--link-item')}>
Contact
</div>
</div>
</ul>

现在，滚动导航的触发器只定义goTo道具，ref道具由我网站的部分定义。