如何使基于 React 的单页应用程序 (SPA) 有条件地呈现？

Question

我正在制作一个基于 ReactJS 的个人网站。由于这是一个单页应用程序，我想让我的网站有条件地呈现。也就是说，当用户向下滚动以查看不同的section时，Render应该在不同的时间渲染我页面上的每个section在我的页面上，因为我希望我的组件在用户查看此 时动画，而不是在开始时所有这些组件都被动画。

        <Section styles='me' id={'top'}>
        <img className="background-image" src={require('../img/Sydney.jpg')} />
        <Animated animationIn="zoomIn" animationOut="zoomOut" isVisible={true}>
        <div><Avatar src={require('../img/me.jpg')} size={200} round={true} /></div>
        </Animated>
        <h1>Jack Lau</h1>
        <h3>Web/Mobile Apps Developer</h3>
        <h3 style={{ maxWidth: 480 }}>Core Skills:<br/>Ready for React, Redux, Typescript, ES6, JSX, Babel and Webpack. Objective-C, Android Development, C#, JavaScript, PHP, Database Design</h3>
        <div style={{ marginBottom: '30px' }}>
            <a href='https://www.linkedin.com/in/jacklau9515/' className='btn-icon' target='_blank'><i className='fa fa-linkedin-square'></i></a>
            <a href='https://github.com/Jacklau9515' className='btn-icon' target='_blank'><i className='fa fa-github-square'></i></a>
            <a href='https://plus.google.com/u/0/100888601415107489035' className='btn-icon' target='_blank'><i className='fa fa-google-plus-square'></i></a>
        </div>
        <Animated animationIn="rubberBand" animationOut="zoomOut" isVisible={true}>
        <a href='#hire-me' className='btn'>Hire Me!</a>
        </Animated>
        </Section>

        <Section styles='resume'>
        <div id={'background'}>
        <img className="background-image" src={require('../img/xpic11075_sc115.com.jpg')} />
        <h3 className='title'>My Personal Introduction</h3>
        <Animated animationIn="fadeInLeft" animationOut="rollOut" animationInDelay="3" isVisible={true}>
        <p>I graduated from <a href="http://www.utas.edu.au/" target="_blank"><u>University of Tasmania (UTAS)</u></a> in December 2017 with an undergraduate degree (Bachelor of Information and Communication Technology, Software Development). Participate in the implementation of <a href="https://itunes.apple.com/us/app/dbdc/id1296090690?mt=8" target="_blank"><u>Digitized Bike Data</u></a> Project and served as Leader Software Developer of the team.</p>
        <p>I am very detail oriented. You can easily contact me at any hour of the day, and I am enthusiastic and passionate about architectural and design patterns, best practices and cutting-edge technologies.</p>
        <p>During my three years of university study, no less than a Distinction (DN) Grade of All my programming-related subjects, especially web programming. The following table shows the scores and descriptions of all my programming subjects:</p>
       </Animated></Section>

注意：Animated 是一个 React 组件，用于使用 Animated.css 显示或隐藏带有动画的元素。

Answer 1

这是您可以采取的一种方法：

在构建组件时，建立某种形式的内部状态 - 跟踪浏览器的滚动位置并使用某种事件处理程序进行更新。当此位置到达您希望组件进行动画处理的点时，在内部状态中翻转一个布尔值。

在渲染方法中，您可以使用{{Expression/Variable/Const Evaluating to True} && <Component>} 有条件地渲染组件，前提是满足某些特定状态。

这是一些示例代码。我不确定这在 React/Re-Renders 方面的性能如何，我不能说这段代码一定会起作用——我只是想给你指出正确的方向；您可能会尝试应用一些逻辑。

通过 JSX 条件渲染的原理是一个强大的原理，您可以使用它来根据您开发的一些自定义逻辑方案选择性地渲染组件..

class AnimatedContainer extends Component {
    Constructor(props) {
     super(props)

     this.state = {
      renderComponent1: false
      scrollPosition: "0"
     }

     this.handleScroll = this.handleScroll.bind(this)
    }

    handleScroll(scrollPosition) {
     this.setState({
      scrollPosition = document.documentElement.scrollTop })
       if (scrollPosition > 300) { this.setState({ renderComponent1: true })}
    }

    componentDidMount() {
     window.onscroll = () => this.handleScroll(this.state.scrollPosition)
    }
    componentDidUpdate() {
     window.onscroll = () => this.handleScroll(this.state.scrollPosition)
    }

    render() { 
     return(
       <div>
        {renderComponent1 && <AnimatedComponent1>}
       </div>
     )}
}

我被告知更好的方法是使用 addEventListener:

windowScroll = () => this.handleScroll(this.state.scrollPosition)

componentDidMount() {
  window.addEventListener('scroll', this.windowScroll)
}
componentWillUnmount() {
  window.removeEventListener('scroll', this.windowScroll)
}

编辑：您还必须单独实现动画逻辑 - 我假设您的动画组件将有自己的方法来执行此操作。