反应无法找到 img 元素

Question

从服务器渲染 React 组件时，在组件渲染到客户端后，我一直看到“无法找到元素”错误。

Uncaught Error: Invariant Violation: 
findComponentRoot(..., .1ea0t0y2j9c.$img): Unable to find element. 

如果我检查页面源，我可以看到错误中给出的组件的 ID。

这是我的设置；我有一个带有控制器的快速服务器，将组件呈现为字符串并将其发送到浏览器。一旦浏览器第二次呈现组件，我就会收到错误消息。我只看到图像的此错误。我尝试过其他 DOM 组件，但这些组件似乎工作正常。我确定客户端的第二次渲染有一些变化，但我已经将服务器输出与客户端输出进行了比较，我找不到任何差异。

为什么React.DOM.img 组件会发生突变而导致此错误？ React.renderToString 和 React.render 之间是否存在一些差异导致图像标签呈现的差异？

这是服务器代码 app.js

    'use strict';
    var express = require('express');
    var React = require('react');
    var path = require('path');
    var main = React.createElement(require('./main'), {key:'main'});


    var app = express();
    app.use('/js', express.static(path.join(__dirname, '/js/')));
    app.get('/', function(req, res){
      var str = React.renderToString(main);
      res.set('Content-Type', 'text/html');
      res.send(str);
      res.end();
    });

    var server = require('http').createServer(app);
    server.listen(9999, function () {
      console.log('Express server listening');
    });

这是组件代码。 ma​​in.js

我正在使用 webpack 打包 main.js 脚本。

'use strict';
var React = require('react');

var Main = React.createClass({displayName: 'Main',
    render: function(){
        return React.createElement('div',null,
            React.createElement('script',{src: "/js/main.js"}),
            React.createElement('img',{src: "https://www.google.com/images/nav_logo195.png"}));
    }
});

if (typeof window !== "undefined") {
  React.render(React.createElement(Main, {key:'main'}), document.body);
} else {
  module.exports = Main;
}

编辑：更新以反映@ssorallen 的建议

Answer 1

在深入研究了 React 源之后，我发现了为什么 img 标签在第一次渲染页面时会出现这个错误。

img、form 和 input 组件在 componentDidMount 事件中调用 getDOMnode()。由于页面尚未从服务器呈现，因此 img 标记不在缓存中，并且在脚本执行时无法找到。

解决办法是把服务器生成的脚本放在img标签之后，让浏览器有机会第一次渲染。

这是一种老套的解决方案，我想知道这是否是我的误解，或者这只是服务器端渲染这些标签的工作方式。