Question

我试图建立自己的个人网站，并尝试使用React这样做。在这个过程中，我打算让每个部分成为一个不同的React组件。我的计划是让顶部的导航栏能够选择当前哪个组件＆＃34;活动＆＃34;，并实际渲染和显示。此外，当切换到新的部分时，我希望旧组件有一个＆＃34;离开＆＃34;动画，以及进入＆＃34;进入＆＃34;动画（这些是通过react-motion完成的）。但是，目前进入和离开都是同时完成的，因为我同时改变了两个组件的活动状态。有没有办法延迟一个组件在另一个组件变为非活动状态后变为活动状态？

包含每个部分的父组件如下所示：

class Website extends React.Component {

  constructor(props){
    super(props)
    this.state = {
    homeActive: true,
    aboutActive: false
  }

  homeActivator(){
    this.setState({
      homeActive: true,
      aboutActive: false
    })
  }

  aboutActivator(){
    this.setState({
      homeActive: false,
      aboutActive: true
    })
  }

  render(){
    return (
      <div>
        <NavBar handleHome={this.homeActivator.bind(this)} handleAbout=
          {this.aboutActivator.bind(this)}/>
        <Home active={this.state.homeActive} />
        <About active={this.state.aboutActive} />
      </div>
}

然后是其中一个＆＃34;部分＆＃34;看起来像这样：

class Home extends React.Component{

  render() {
    let content = (
      <div>
        Home
      </div>
    )

    if (!this.props.active){
      return (
        //Some jsx that results in the content leaving the page
      )
    }

    return(
      //Some jsx that results in the content entering the page
    )
  }
}

Answer 1

我没有足够的时间来回答这个问题，但我想出了最好的例子。它不是您想要做的完全复制品，但非常相似，所以如果您理解它，您将能够很容易地找出问题所在。

为了让事情更容易理解，我使用放在React类中的方法来模仿组件。显然，在现实世界中，您将从其他文件导入组件。我确定你了解发生了什么。

export default class Example extends Component {
  constructor(props) {
    super(props)

    this.state = {
      c1: true,
      c2: false
    }
  }

  // Component One
  renderc1() {
    return (
      <div>
        I am component one
      </div>
    )
  }

  // Component Two
  renderc2() {
    return (
      <div>
        I am component two
      </div>
    )
  }

  changeComponents = () => {
    this.setState({ c1: false })

    setTimeout(() => {
      this.setState({ c2: true })
    }, 1500)
  }

  render() {
    return (
      <div className="example">

        {this.state.c1 ? this.renderc1() : null}
        {this.state.c2 ? this.renderc2() : null}

        <button onClick={this.changeComponents}>Click me</button>

      </div>
    )
  }
}

单击该按钮将触发changeComponents函数，然后立即设置＆＃34; c1＆＃34;的状态。为假。之后的setTimeout确保组件2将延迟渲染到屏幕。

注意我使用的箭头语法，它将this关键字绑定到类中，因此您不必担心在任何地方编写绑定。

渲染组件的延迟？

1 个答案: