Question

我为固定导航创建了一个React组件，我希望保持隐藏，直到我滚过页面上的某个点，然后滑入视图。 Medium的标题类似于我所描述的标题。

这在jQuery中是一项相对简单的任务，有滚动或航点，但有一种惯用的方法可以用React和vanilla JS来完成吗？

Answer 1

React Way with vanilla JS jsfiddle;

不要忘记删除EventListener。在此示例中，只有在必要时才会呈现组件

class TopBar extends React.Component {
    state = { isHide: false };

    hideBar = () => {
       const { isHide } = this.state

       window.scrollY > this.prev ?
       !isHide && this.setState({ isHide: true })
       :
       isHide && this.setState({ isHide: false });

       this.prev = window.scrollY;
    }

    componentDidMount(){
        window.addEventListener('scroll', this.hideBar);
    }

    componentWillUnmount(){
         window.removeEventListener('scroll', this.hideBar);
    }

    render(){
        const classHide = this.state.isHide ? 'hide' : '';
        return <div className={`topbar ${classHide}`}>topbar</div>;
    }
}

Answer 2

您可以使用react-headroom之类的组件为您完成繁重的工作。或者，您仍然可以在React中使用路标，在componentDidMount lifecycle method中进行设置并使用componentWillUnmount将其删除。

Answer 3

在componentDidMount生命周期钩子中，执行与您给出的jQuery链接相同的操作：

class Navbar extends React.component {

  let delta = 5;

  render() {
    return (
      <div ref=header></div>
    );
  }

  componentDidMount() {
    $(window).scroll(function(event){
      var st = $(this).scrollTop();

      if(Math.abs(this.state.lastScrollTop - st) <= delta)
        return;

      if (st > lastScrollTop){
        // downscroll code
        // $(this.refs.header).css('visibility','hidden').hover ()
        this.setState({
          navbarVisible: false
        });
      } else {
        // upscroll code
        $(this.refs.header).css('visibility','visible');
        this.setState({
          navbarVisible: true
        });
      }
      lastScrollTop = st;
    }.bind(this));

  }
}

Answer 4

我为同样的需要创建了一个react组件，因为我找不到任何与我需要的匹配的其他实现。即使class MyScrollInNavBar extends Component { render() { return ( <ScrollInNav scrollInHeight={150}> <MyNavBar /> </ScrollInNav> ); } }也没有给你一些只能在到达页面上的某个点后滚动的内容。

要点在于：https://gist.github.com/brthornbury/27531e4616b68131e512fc622a61baba

我认为没有理由在此处复制组件代码。代码主要基于ModelDefinition definition = GetModelDefinition(typeof(T)); if (definition == null) return this; string fieldName = selector.GetPropertyName(); FieldDefinition field = definition.GetFieldDefinition(fieldName); if (field != null) { definition.FieldDefinitions.Remove(field); definition.IgnoredFieldDefinitions.Add(field); definition.AfterInit(); }代码，但代码较少，因此更简单。

该组件是第一段代码，您只需复制/粘贴然后导入即可。使用导航栏导入代码后，看起来像这样：

agentRegex = re.compile(r'Agent (\w)+')

如何在滚动上显示React组件

4 个答案: