reactjs – React无法找到img元素

从服务器渲染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');
    });

这是组件代码. main.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;
}

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

解决方法

在深入研究反应源后,我发现了为什么img标签在首次渲染页面时出现此错误.

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

解决方案是将服务器生成的脚本放在img标记之后,以便浏览器有机会第一次呈现.

这是一种hacky解决方案,我想知道这是否是我的误解,或者这只是服务器端渲染对这些标签有效的方式.