3

I'm trying to embedding text/html in a react Modal component. But when I run my app with electron the Google Inspector show me some errors.

Uncaught invariant.js:38 Uncaught Invariant Violation: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. This DOM node was rendered by Example.

SOLUTION : Replace the <object> by <webview>

this is my code 

import React from 'react';
import SkyLight from 'react-skylight';

class Example extends React.Component {
  constructor(props){
    super(props);
  }

  render() {
    return (
      <div>
        <section>
          <h1>React SkyLight</h1>
          <button onClick={() => this.refs.simpleDialog.show()}>Ouvrez le modal</button>
        </section>
        <SkyLight  hideOnOverlayClicked ref="simpleDialog" title="Hi, I'm a simple modal">
          <object type="text/html" data="http://www.example.com" style="width:100%; height:100%">
            <p>backup content</p>
          </object>
        </SkyLight>
      </div>
    )
  }
}

Example.displayName = 'Example';

export default Example;
BradByte
  • 11,015
  • 2
  • 37
  • 41
kakame91
  • 97
  • 1
  • 10

1 Answers1

1

try to change this line

<object type="text/html" data="http://www.example.com" style="width:100%; height:100%">

with this

    <object type="text/html" data="http://www.example.com" 
style={{width:'100%', height:'100%'}}>

the style attribute expects a json object, for more details you can check this link https://facebook.github.io/react/docs/dom-elements.html#style

rakesh
  • 129
  • 4
  • 1
    It works but they're problem because of cross domain secure for "https" sites.Error "in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'." – kakame91 Dec 02 '16 at 15:22
  • That error means that the host is forbidding you from putting their page in an iframe/object. You will not be able to do what you're attempting, at least with that particular site. It might work fine for other sites/pages though. Read more at: http://stackoverflow.com/questions/27358966/how-to-set-x-frame-options-on-iframe – Jeff McCloud Dec 02 '16 at 23:08