反应无法找到 img 元素

Question

从服务器渲染 React 组件时，组件在客户端渲染后我一直看到 'Unable to find element' 错误。

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;
}

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

Answer 1

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

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

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

这是一个 hacky 解决方案，我想知道这是否是我的误解，或者这是否只是服务器端呈现这些标签的方式。

反应无法找到 img 元素

React Unable To Find img Element

reactjs