Реагируйте - не допускайте установки всех дочерних компонентов под нагрузкой - PullRequest
Новая
       27

Реагируйте - не допускайте установки всех дочерних компонентов под нагрузкой

0 голосов
/ 24 декабря 2018

Я пытаюсь создать одностраничное приложение React, которое монтирует определенные компоненты одновременно.Вместо этого все компоненты загружаются одновременно.

Посты StackOverflow, которые я обнаружил о монтировании компонентов, предназначены для предотвращения их повторного рендеринга при изменениях.У меня есть 3 раздела, и я хочу, чтобы только один отображался при загрузке страницы.Я хочу, чтобы Таймер появился первым.Когда кнопка запуска нажата, я хочу, чтобы появились вопросы.Наконец, когда таймер достигает нуля или пользователь нажимает кнопку отправки, появляются результаты.Отдельные компоненты работают так, как я хочу, но я хочу скрыть их, пока они не будут вызваны.FYI - (selectedOption) из зависимости React-Select.

Repo: https://github.com/irene-rojas/pixar-react

App 

import React, { Component } from 'react';
import './App.css';
import Timer from "./Timer";
import Questions from "./Questions/Questions.js";
import Results from "../src/Results";

class App extends Component {

state = {
    totalTrue: 0,
    totalFalse: 0,
}

componentDidMount() {
    return (
        <Timer />
    )
}

// submit button
handleFormSubmit = event => {
    event.preventDefault();
    console.log("submit button clicked");
        return (
            <Results />
        )
};

callbackHandlerFunction = ( selectedOption ) => {
    const answerValue = selectedOption.value;
    if (answerValue === true) {
        this.setState({totalTrue: this.state.totalTrue + 1}, () => {
            console.log(`New TotalTrue: ${this.state.totalTrue}`);
        });
    };
    if (answerValue === false) {
        this.setState({totalFalse: this.state.totalFalse + 1}, () => {
            console.log(`New TotalFalse: ${this.state.totalFalse}`);
        });
    };
  } 

  render() {
    return (

  <div className="parallax">

    <div className="App">

        <div className="wrapper">

        <div className="headerDiv">
            <h1>Pixar Trivia!</h1>
        </div>

        <div className="timerDiv">
            <Timer />   
        </div>

        <div className="questionSection">
            <Questions 
                handleClickInParent={this.callbackHandlerFunction} 
            />

            <div>
                <button onClick={this.handleFormSubmit}>Submit</button>
            </div>
        </div>



        {/* this code will hide Results until these conditions are met. This was an experiment to see if anything hid Results from mounting on load */}
        {this.state.totalTrue >= 8 && this.state.totalFalse >= 8 &&
        <div className="resultsDiv">
            <Results 
                totalTrue={this.state.totalTrue}
                totalFalse={this.state.totalFalse}
            />
        </div>
        }      
        </div>

    </div>

  </div>
   );
  }
}

export default App;

Таймер 

import React, { Component } from 'react';

class Timer extends Component {

  state = {
timer: 10
  };

  startTimer = () => {
    this.timer = setInterval(() => this.setState({
    timer: this.state.timer - 1}), 1000); 
    // onClick, load Questions
    // but do I need to import Questions?
   };

  stopTimer = () => {
    clearInterval(this.timer);
    alert("Time's up!");
    // when this.state.timer === 0, load Results
    // do I need to import Results?
  };

  render() {
    return (
      <div className="Timer">
        <div>{this.state.timer} seconds</div>
        <button onClick={this.startTimer}>Start!</button>
        {this.state.timer === 0 && this.stopTimer()}
      </div>
    );
  }
}

export default Timer;

Ответы [ 2 ]

0 голосов
/ 24 декабря 2018

вы можете проверить состояние внутри render метода и отобразить нужный компонент 

render() {
  let renderedContent;
  if (condition to meet) {
      renderedContent = <Component1>
  } else if ( second condition to meet) {
     renderedContent = <Component2>
  } else { 
     renderedContent = <Component3>
  }

  return (
    { renderedContent }
  )
}
0 голосов
/ 24 декабря 2018

Вы должны посмотреть на условный рендеринг .render() вашего приложения по умолчанию содержит все подкомпоненты.Вы либо захотите установить их скрытыми, либо вообще не отображать их.

Например, 

{conditionToMeet &&
 <div>
    content to render here
 </div>
}
...