react: Invoking renderToStaticMarkup in render() causes refs to break

Demonstrated at http://jsfiddle.net/xnhzvdoa/1/; open the error console and you should see this:

Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `render` method). Try rendering this component inside of a new top-level component which will hold the ref.

var Bug = React.createClass({
    render: function() {
        var html = React.renderToStaticMarkup(React.DOM.img());
        return React.DOM.div({ ref: 'ref' }, html);
    }
});
Bug = React.createFactory(Bug);

React.render(Bug(), document.body);

About this issue

  • Original URL
  • State: closed
  • Created 9 years ago
  • Comments: 21 (9 by maintainers)

Most upvoted comments

fyi, we found a workaround to this in react-virtualized by using the fn form of ref rather than ref=“ref”

https://github.com/bvaughn/react-virtualized/pull/302/commits/7e0f2827d6414fc016f72fde87484a6fc398fbf8

no idea why, but hopefully that helps someone

I would be happy to take a PR that sets ReactOwner.current back to its old value in all the places we mutate it.