Uncaught TypeError: Cannot read property 'firstChild' of undefined in React, React-Bootstrap

Question

在尝试演示 ReactBootstrap Modal 之前，我的代码一直很好。当我将从顶级组件传递给我的 Modal 组件的 show prop 初始化为 true（this.state.showResult in QuizApp）时，我不断得到
Uncaught TypeError: Cannot read property 'firstChild' of undefined
当 showResult 初始化为 false 时，它工作正常。

当 Modal 的 `show` prop 设置为 true 时，就会发生错误。

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

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

让情况更加混乱的是 show 是一个新添加的道具，它出现在 ReactBootstrap 文档的代码示例中，但我在文档中找不到关于它的任何内容。

class 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 结果

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 的 v0.24.5 版本，解决了这个问题。

https://github.com/react-bootstrap/react-bootstrap/issues/1179

Uncaught TypeError: Cannot read property 'firstChild' of undefined in React, React-Bootstrap