我正在尝试创建一个单页 React 应用程序,一次安装某些组件。相反,所有组件都是一次性加载的。
我发现的有关安装组件的 StackOverflow 帖子是关于防止它们在更改时重新渲染的。我有 3 个部分,但我只希望其中一个部分出现在页面加载时。我希望计时器首先出现。当按下开始按钮时,我希望出现问题。最后,当计时器归零或用户按下提交按钮时,结果就会出现。各个组件都按我想要的方式工作,但我想隐藏它们直到它们被调用。仅供引用 - (selectedOption) 来自 React-Select 依赖项。
仓库:https://github.com/irene-rojas/pixar-react
应用程序
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;
最佳答案
您应该查看conditional rendering 。默认情况下,您的应用程序的 render()
具有所有子组件。您要么想要将它们设置为隐藏,要么根本不渲染它们。
例如
{conditionToMeet &&
<div>
content to render here
</div>
}
关于javascript - React - 防止所有子组件安装在负载上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53907295/