Question

  rotateRender() {

    if(false) {

      return(
        <TimerPage></TimerPage>
      );


    } else {


      return(
        <RepoPage></RepoPage>
      );

    }
  }

我有两个名为TimerPage和RepoPage的组件。我创建了一个如上所述的简单条件渲染函数，但是在一段时间之后无法提出迭代渲染的条件。

例如，我首先要渲染RepoPage并在5分钟后切换到TimerPage，然后在TimerPage停留15分钟，然后再切换到RepoPage

有什么办法吗？

Answer 1

如评论部分所述，您可以创建一个更高阶的组件，该组件将根据该组件的状态在组件中循环。使用setTimeout来处理组件的计时器逻辑。

state = {
  timer: true
}

componentDidMount = () => {
  setInterval(
    () => {
    this.setState({ timer: !this.state.timer })
  }, 30000)
}

render(){
  const {timer} = this.state
  if(timer){
    return <TimerPage />
  } else {
    return <RepoPage />
  }
}

修改

将setTimeout更改为setInterval，使其每5分钟循环一次，而不是仅调用setState一次

Answer 2

~~可能不那么优雅，但这可行~~

实际上我觉得这块可能比第一块更优雅

const FIRST_PAGE = '5_SECONDS';
const SECOND_PAGE = '15_SECONDS';

const FirstComponent = () => (
  <div>5 SECONDS</div>
);

const SecondComponent = () => (
  <div>15 SECONDS</div>
);

class App extends Component {
  state = {
    currentPage: FIRST_PAGE
  };

  componentDidUpdate() {
    const {currentPage} = this.state;
    const isFirst = currentPage === FIRST_PAGE;

    if (isFirst) {
      this._showSecondPageDelayed();
    } else {
      this._showFirstPageDelayed();
    }
  }

  componentDidMount() {
    this._showSecondPageDelayed();
  };

  _showSecondPageDelayed = () => setTimeout(() => {this.setState({currentPage: SECOND_PAGE})}, 5000);

  _showFirstPageDelayed = () => setTimeout(() => {this.setState({currentPage: FIRST_PAGE})}, 15000);

  render() {
    const {currentPage} = this.state;
    const isFirst = currentPage === FIRST_PAGE;
    const ComponentToRender =  isFirst ? FirstComponent : SecondComponent;

    return <ComponentToRender/>;
  }
}

Answer 3

您可以使用新的上下文API来实现此目的。现在的好处是我有一个可配置的，可重复使用的提供程序，可以在我的应用程序中使用。这是一个快速演示： https://codesandbox.io/s/k2vvy54r8o

import React, { Component, createContext } from "react";
import { render } from "react-dom";

const ThemeContext = createContext({ alternativeTheme: false });

class ThemeWrapper extends Component {
  state = {
    alternativeTheme: false
  };

  themeInterval = null;

  componentDidMount() {
    this.themeInterval = setInterval(
      () =>
        this.setState(({ alternativeTheme }) => ({
          alternativeTheme: !alternativeTheme
        })),
      this.props.intervalLength
    );
  }

  componentWillUnmount() {
    if (this.themeInterval) {
      clearInterval(this.themeInterval);
    }
  }

  render() {
    return (
      <ThemeContext.Provider value={this.state}>
        {this.props.children}
      </ThemeContext.Provider>
    );
  }
}

const App = () => (
  <ThemeWrapper intervalLength={2000}>
    <ThemeContext.Consumer>
      {({ alternativeTheme }) =>
        alternativeTheme ? <p>Alternative Theme</p> : <p>Common Theme</p>
      }
    </ThemeContext.Consumer>
  </ThemeWrapper>
);

render(<App />, document.getElementById("root"));

无论你做什么，都要确保在componentWillUnmount上清除你的间隔或超时以避免内存泄漏。

在React中切换两个组件

3 个答案: