javascript - Bootstrap col-md 问题
问题描述
我制作了一个简单的 React-Trivia 应用程序,并使用 Bootstrap 对其进行了自定义。
主要问题是“正确/错误答案”部分显示在整个应用程序主体下方。我想把它做成单行。
render
在我的方法中,这似乎是一个风格错误。你能帮我修一下吗?
先感谢您。这是我的 CodePen 代码的链接:CodePen
const questions = [
{
question: 'What is 8 X 2?',
options: [5, 16, 12, 18],
answer: 16
},
{
question: 'What is 18 / 3?',
options: [6, 10, 7, 5],
answer: 6
},
{
question: 'What is 3 X 2?',
options: [5, 16, 6, 10],
answer: 6
},
{
question: 'What is 5 X 0?',
options: [0, 5, 10, 6],
answer: 0
},
{
question: 'What is 11 X 11?',
options: [121, 144, 112, 120],
answer: 121
},
{
question: 'What is 12 X 6?',
options: [68, 82, 72, 56],
answer: 72
},
{
question: 'What is 89 X 2?',
options: [186, 192, 178, 155],
answer: 178
},
{
question: 'What is 56 / 2?',
options: [18, 32, 26, 28],
answer: 28
},
{
question: 'What is 8 X 3?',
options: [32, 18, 24, 21],
answer: 24
},
{
question: 'What is 9 X 8?',
options: [81, 72, 64, 68],
answer: 72
}
]
function Question(props){
return (
<div>
<h2 className='question'>{props.question}</h2>
</div>
);
}
function Option(props){
return (
<div>
<button className = 'btn btn-light btn-lg btn-block mb-2' type = 'button' onClick = {() => {props.onClick()} }>{props.option}</button>
</div>
)
}
function Options(props){
const options = props.options.map ((option) => <Option key = {option} option = {option} onClick = {() => {props.onClick(option)}} />);
return (
<div>
{options}
</div>
)
}
function AnswerResult(props){
return (
<div className = 'result'>
<div className="col-md-12">
<div className="card bg-success text-light">
<div className="card-body">
<h6 className="card-title">Correct Answers</h6>
<h1>{props.correctAnswers}</h1>
</div>
</div>
</div>
<br/>
<div className="col-md-12">
<div className="card bg-danger text-light">
<div className="card-body">
<h6 className="card-title">InCorect Answers</h6>
<h1>{props.incorrectAnswers}</h1>
</div>
</div>
</div>
</div>
)
}
class TriviaApp extends React.Component{
constructor(props){
super(props)
this.state = {
questions: questions,
correctAnswers: 0,
incorrectAnswers: 0,
questionNumber: 0
};
this.handleClick = this.handleClick.bind(this);
}
isGameFinished(){
return !this.state.questions[this.state.questionNumber];
}
handleClick(selectedOption){
const questionInfo = this.state.questions[this.state.questionNumber];
if (!this.isGameFinished()) {
let sumCorrect = 0;
let sumIncorrect = 0;
if (selectedOption === questionInfo.answer) {
sumCorrect++;
} else {
sumIncorrect++;
}
this.setState((prevState, props) => {
return {
questionNumber: prevState.questionNumber + 1,
correctAnswers: prevState.correctAnswers + sumCorrect,
incorrectAnswers: prevState.incorrectAnswers + sumIncorrect
}
});
}
}
render(){
let questionInfo;
const gameIsActive = !this.isGameFinished();
if (gameIsActive) {
questionInfo = this.state.questions[this.state.questionNumber];
} else {
questionInfo = this.state.questions[this.state.questions.length - 1];
}
return (
<div className='row'>
<div className='col-md-9 border rounded p-5 mt-1 text-center'>
<Question question = {questionInfo.question} />
<Options options = {questionInfo.options} onClick = {this.handleClick} />
</div>
<div className = 'col-md-3 border rounded ml-1 text-center p-5 mt-1'>
<AnswerResult correctAnswers = {this.state.correctAnswers} incorrectAnswers = {this.state.incorrectAnswers} />
</div>
{!gameIsActive && <div><span>End of the game!</span></div>}
</div>
);
}
}
ReactDOM.render(
<TriviaApp />,
document.getElementById('root')
)
解决方案
我认为您在网格系统类中有一个错误。试试这样的代码:
const questions = [
{
question: 'What is 8 X 2?',
options: [5, 16, 12, 18],
answer: 16
},
{
question: 'What is 18 / 3?',
options: [6, 10, 7, 5],
answer: 6
},
{
question: 'What is 3 X 2?',
options: [5, 16, 6, 10],
answer: 6
},
{
question: 'What is 5 X 0?',
options: [0, 5, 10, 6],
answer: 0
},
{
question: 'What is 11 X 11?',
options: [121, 144, 112, 120],
answer: 121
},
{
question: 'What is 12 X 6?',
options: [68, 82, 72, 56],
answer: 72
},
{
question: 'What is 89 X 2?',
options: [186, 192, 178, 155],
answer: 178
},
{
question: 'What is 56 / 2?',
options: [18, 32, 26, 28],
answer: 28
},
{
question: 'What is 8 X 3?',
options: [32, 18, 24, 21],
answer: 24
},
{
question: 'What is 9 X 8?',
options: [81, 72, 64, 68],
answer: 72
}
]
function Question(props){
return (
<div>
<h2 className='question'>{props.question}</h2>
</div>
);
}
function Option(props){
return (
<div>
<button className = 'btn btn-light btn-lg btn-block mb-2' type = 'button' onClick = {() => {props.onClick()} }>{props.option}</button>
</div>
)
}
function Options(props){
const options = props.options.map ((option) => <Option key = {option} option = {option} onClick = {() => {props.onClick(option)}} />);
return (
<div>
{options}
</div>
)
}
function AnswerResult(props){
return (
<div className = 'result row'>
<div className="col-md-6">
<div className="card bg-success text-light">
<div className="card-body">
<h6 className="card-title">Correct Answers</h6>
<h1>{props.correctAnswers}</h1>
</div>
</div>
</div>
<br/>
<div className="col-md-6">
<div className="card bg-danger text-light">
<div className="card-body">
<h6 className="card-title">InCorect Answers</h6>
<h1>{props.incorrectAnswers}</h1>
</div>
</div>
</div>
</div>
)
}
class TriviaApp extends React.Component{
constructor(props){
super(props)
this.state = {
questions: questions,
correctAnswers: 0,
incorrectAnswers: 0,
questionNumber: 0
};
this.handleClick = this.handleClick.bind(this);
}
isGameFinished(){
return !this.state.questions[this.state.questionNumber];
}
handleClick(selectedOption){
const questionInfo = this.state.questions[this.state.questionNumber];
if (!this.isGameFinished()) {
let sumCorrect = 0;
let sumIncorrect = 0;
if (selectedOption === questionInfo.answer) {
sumCorrect++;
} else {
sumIncorrect++;
}
this.setState((prevState, props) => {
return {
questionNumber: prevState.questionNumber + 1,
correctAnswers: prevState.correctAnswers + sumCorrect,
incorrectAnswers: prevState.incorrectAnswers + sumIncorrect
}
});
}
}
render(){
let questionInfo;
const gameIsActive = !this.isGameFinished();
if (gameIsActive) {
questionInfo = this.state.questions[this.state.questionNumber];
} else {
questionInfo = this.state.questions[this.state.questions.length - 1];
}
return (
<div className='row'>
<div className='col-md-12 border rounded p-5 mt-1 text-center'>
<Question question = {questionInfo.question} />
<Options options = {questionInfo.options} onClick = {this.handleClick} />
</div>
<div className = 'col-md-12 border rounded ml-1 text-center p-5 mt-1'>
<AnswerResult correctAnswers = {this.state.correctAnswers} incorrectAnswers = {this.state.incorrectAnswers} />
</div>
{!gameIsActive && <div><span>End of the game!</span></div>}
</div>
);
}
}
ReactDOM.render(
<TriviaApp />,
document.getElementById('root')
)
我可以看到这个工作!我希望我能以正确的方式理解你。如果有帮助,请告诉我!
谢谢!
推荐阅读
- compilation - Coq 问题。编译错误。[file-no-extension,filesystem] 和语法条目 "ident" 允许 "_"
- python - 为什么 PyCharm 向修饰方法报告虚假警告?为方法定义装饰器的pythonic方式是什么?
- macos - SwiftUI 有没有办法让禁用的 TextField 在 Mac OS 上变灰
- python - 套接字侦听但未出现在 netstat 中
- c# - 带有本地图像的 C# Azure Face API。错误请求例外
- azure-databricks - plot_tree 返回空图表
- javascript - Axios GET 没有显示所有数据。我需要打第二个电话才能接他们
- numpy - 矩阵形式的 ODE 系统
- c++ - 使 int 重载成为可取的重载
- reactjs - React Native 中的响应式 UI