Question

我制作了一个简单的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')
)

Answer 1

我认为您在网格系统类中有一个错误。尝试使用以下代码：

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')
)

我可以看到它正在工作！希望我能以正确的方式理解您。请告诉我是否有帮助！

谢谢！

Answer 2

由于填充，边距等原因。您的行不能同时支持col-md-9和col-md-3。解决方法是删除col-md-3，然后改为使用col自动调整大小。

参考：https://getbootstrap.com/docs/4.0/layout/grid/#setting-one-column-width

Bootstrap Col-md问题

2 个答案: