动态部分渲染不起作用

Question

我是一个初学者Reactjs开发人员，我在页面中渲染动态组件时遇到了问题。该项目遵循本教程，介绍如何使用React创建测验应用程序：react-quiz

我想添加的是反馈组件，因此当用户选择一个选项时，无论答案是否正确，该应用都会返回结果。

我添加了一个反馈组件：

import React from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

 function Feedback(props) {


  return (

<ReactCSSTransitionGroup
  className="container"
  component="div"
  transitionName="fade"
  transitionEnterTimeout={800}
  transitionLeaveTimeout={500}
  transitionAppear
  transitionAppearTimeout={500}
>
  <div>
    <h2>{props.answerResult}</h2>
    <h2>You can find the article here: {props.url}</h2>
    <button
        className="btn btn-default"
        onClick={props.onNextAnswerSelected}>
    Next question
    </button>
  </div>
</ReactCSSTransitionGroup>
  );

}

Feedback.propTypes = {
  answerResult: React.PropTypes.string.isRequired,
  url: React.PropTypes.string.isRequired,
  onNextAnswerSelected: React.PropTypes.func.isRequired,

};


export default Feedback;

然后，在App.js上我添加了以下代码：

renderAnswerResult() {
    return (
        <div>
        <Feedback 
            answerResult={this.state.answerResult}
            url={this.state.url}
            onNextAnswerSelected={this.handleNextAnswerSelected}
        />
        </div>
    );
  }

handleAnswerSelected(event) {
    this.checkAnswer(event.currentTarget.value);
    this.renderAnswerResult();
  }

handleNextAnswerSelected(event) {

    if (this.state.questionId < quizQuestions.length) {
        setTimeout(() => this.setNextQuestion(), 300);
    } else {
        setTimeout(() => this.setResults(this.getResults()), 300);
    }

  }

checkAnswer(answer) {
    var updatedRes = '';
    if (answer === 'yes'){
        updatedRes = 'Correct!';
    }
    else {
        updatedRes = 'Incorrect!';
    }
    const updatedAnswersCount = update(this.state.answersCount, {
      [answer]: {$apply: (currentValue) => currentValue + 1}
    });

    this.setState({
        answersCount: updatedAnswersCount,
        answer: answer,
        answerResult: updatedRes,
        url: quizQuestions[this.state.counter].url
    });

  }

render() {
    return (
      <div className="App">
        <div className="App-header">
          <a href="http://chequeado.com"><img src={logo} className="App-logo" alt="logo" /></a>
        </div>
        {this.state.result ? this.renderResult() : this.renderQuiz()}

      </div>
    );
  }

问题是this.renderAnswerResult（）什么都不做，所以我不能继续讨论下一个问题。我想做的是在测验div下面加载反馈。