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

这是组件代码。的 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

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

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

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

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

React无法找到img元素

1 个答案: