reactjs - React 无法找到 img 元素

Question

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

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

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

这是我的设置；我有一个带有 Controller 的快速服务器，将组件渲染为字符串并将其发送到浏览器。一旦浏览器第二次渲染该组件，我就会收到错误。我只看到图像的此错误。我尝试过其他 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;
}

编辑:更新以反射(reflect)@ssorallen的建议

Answer 1

在深入研究了 React 源代码之后，我发现了为什么 img 标签在首次渲染页面时会出现此错误。

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

解决方案是将服务器生成的脚本放在 img 标签后面，让浏览器有机会第一次渲染。

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