Question

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

        <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>

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

Answer 1

您可以采取以下一种方法：

在构建Component时，建立某种形式的内部状态 - 跟踪浏览器的Scroll Position并使用某种事件处理程序更新它。当此位置到达您希望组件为Animate的点时，在内部状态内翻转布尔值。

在渲染方法中，只有在满足某些特定状态时，才可以使用{{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)
}

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

如何有条件地基于React渲染我的单页应用程序（SPA）？

1 个答案: