通过React.render更新会产生奇怪的结果

Question

我正在使用React编写一个Web应用程序，由于UI框架的工作方式，我需要使用在html中安装到div的多个React组件。要更新这些div，我再次调用React.render来更新不同的组件。

这在我自己的机器上运行得很好，但是一旦我在位置http://svdoever.github.io/trainercoach上部署了最小化版本，我就会出现奇怪的行为。

复制步骤：

1. 导航至http://svdoever.github.io/trainercoach
2. 点击汉堡菜单
3. 选择菜单中的项目（打开练习集）
4. 在底部按“＆gt;”下一步按钮
5. 似乎正在重新加载应用

初始呈现的HTML是：



选择“＆gt;”后调用renderExercise()的下一个按钮，在新生成的div中似乎有一种“重新加载”整个应用程序：



新推出的div是：

<div data-title="http://svdoever.github.io/trainercoach/" id="1452577160" class="panel active" data-crc="1452577160" style="z-index: 10;">

此div包含整个呈现页面中的所有类型的内容，例如标记中定义的标记。

React认为这是一个不匹配的服务器端呈现，并带有错误：

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server: (client) <ul class="list ins (server) <ul class="list ins

在我看来，应该只有更新，不会引入新的div。

相关代码：

    function renderIndex(source) {
        var context = { rootUri: source.substring(0, source.lastIndexOf( "/" )) };
        $.get(source + "?v=" + Math.random().toString(), function (indexMarkdown) {
            $.afui.hideMask();
            var indexManager =  new IndexManager(source, indexMarkdown, this.rootUri);
            React.render(<Index key="index" indexManager={indexManager}/>, document.getElementById('mountIndexLeftMenu'));
        }.bind(context));
    }

    function renderExercises(source) {
        var context = { rootUri: source.substring(0, source.lastIndexOf( "/" )) };
        $.get(source + "?v=" + Math.random().toString(), function (exercisesMarkdown) {
            $.afui.hideMask();
            var exerciseManager =  new ExerciseManager(source, exercisesMarkdown, this.rootUri);
            renderExercise(exerciseManager);
        }.bind(context));
    }

    function renderExercise(exerciseManager) {
        React.render(<ExercisesHeader key="exerciseHeader" exerciseManager={exerciseManager}/>, document.getElementById('mountAppHeader'));
        React.render(<Exercises key="exercises" exerciseManager={exerciseManager}/>, document.getElementById('mountExercisesViewer'));
        React.render(<ExercisesController key="exercisesController" exerciseManager={exerciseManager}/>, document.getElementById('mountExercisesController'));
    }

    renderIndex("https://raw.githack.com/wiki/svdoever/trainercoach/indexhotyoga.md");

奇怪的是，这种行为只发生在我的缩小项目上。