swiftcarrot / react-frame Goto Github PK

Latest version of the library isn't work because of error

Uncaught TypeError: Cannot delete property 'children' of #<Object>

This error occures in my test app with React 14 and in the example page
http://pqx.github.io/react-frame/example/

Hi, I'm rendering the frame component inside a portal (actually 2 iframes inside 2 different portals), and sometimes I get an error and the component unmounts:

Uncaught Invariant Violation: unmountComponentAtNode(...): Target container is not a DOM element.

react-dom.development.js:506 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    in Reactiifyer (created by App)
    in App

package.json:

    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-frame": "^2.2.19",

Not really sure what's the cause of the error.

Thrown at: ReactDOM.render(this._children, this.body);

render(): Rendering components directly into document.body is discouraged, since its children are often manipulated by third-party scripts and browser extensions. This may lead to subtle reconciliation issues. Try rendering into a container element created for your app.

styleSheets prop is actually required though there are no prop types, resulting in obscure errors at
https://github.com/pqx/react-frame/blob/master/src/frame.js#L6

Please, add .bind(this) for Iframe onLoad callback

Hey,

I am using newest version of this component. It works great but I found one little issue. In my iframe I have base styles in files and few customized added to iframe via css prop. On IE style tag is the first element in head - on other browsers is after link tags.

Right now I use setTimeout to delay adding style to head but maybe someone know better solution.

renderFrame: function renderFrame() {
    var frame = ReactDOM.findDOMNode(this);
    this.head = frame.contentDocument.head;
    this.body = frame.contentDocument.body;

    this.updateStylesheets(this.props.styleSheets);
    setTimeout(function(){
      this.updateCss(this.props.css);
    }.bind(this),0);

    ReactDOM.render(this._children, this.body);
}

How to insert script into iframe ?

Thanks for this great library. On the demo page, if I hit reload, I'm using Firefox, it renders twice.