未捕获的TypeError：无法在React，React-Bootstrap中读取未定义的属性'firstChild'

Question

我的代码很好，直到我尝试演示ReactBootstrap模式。当我将从我的顶级组件传递到我的模态组件的show道具初始化为true（this.state.showResult中的QuizApp）时，我一直在准备 Uncaught TypeError: Cannot read property 'firstChild' of undefined
当showResult初始化为false时，它可以正常工作。

只要Modal的show prop设置为true，就会发生错误。

最终我会有将showResult设置为true的事件处理程序，但是现在我只是想看看Modal会是什么样子，从而初始化showResult: true。

我能找到的唯一相关信息是这个错误是由同一页面上的多个版本的React引起的，但我不认为这适用于此。我正在创建一个非常简单的应用程序，在浏览器中完成所有的转换/构建，不使用node进行预构建 TypeError when using React: Cannot read property 'firstChild' of undefined

使情况更加混乱的原因是show是一个新添加的道具，显示在ReactBootstrap文档的代码示例中，但我在文档中找不到任何关于它的文章。
How to open/close react-bootstrap modal programmatically?

类QuizApp

class QuizApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { quiz: {questions: []}, showResult: true };
  }
  componentDidMount() {
    var quizRef = new Firebase('https://firequiz.firebaseio.com/quizzes/' + this.props.i);
    quizRef.on('value', snapshot => this.setState({
      quiz: snapshot.val()
    }));
  }
  render() {
    let closeResult = e => this.setState({ showResult: false });
    return (
      <div>
        {quizHeader}
        <QuestionList data={this.state.quiz.questions}/>
        <Result show={this.state.showResult} onHide={closeResult} />
      </div>
    );
  }
}

类结果

class Result extends React.Component {
  render() {
    return (
      <Modal {...this.props} bsSize='medium' aria-labelledby='contained-modal-title-md'>
        <Modal.Header closeButton>
          <Modal.Title id='contained-modal-title-md'>Your score</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          hello
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={this.props.onHide}>Close</Button>
        </Modal.Footer>
      </Modal>
    );
  }
}

演示：http://codepen.io/prashcr/pen/NqVbzE

Answer 1

这确实是与两个不同react版本的冲突。我使用的react-bootstrap版本与react 0.14捆绑在一起，而我使用的react版本为0.13.3

使用react-bootstrap版本的CURLINFO_EFFECTIVE_URL来修复此问题。

v0.24.5