javascript - 如何在 React 组件中嵌入 text/html？

Question

我正在尝试将 text/html 嵌入到 React Modal 组件中。但是当我用 electron 运行我的应用程序时，Google Inspector 会显示一些错误。

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.

解决方案:替换 <object>通过 <webview>

这是我的代码

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;

Answer 1

试着改变这条线

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

有了这个

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

样式属性需要一个 json 对象，有关更多详细信息，您可以查看此链接 https://facebook.github.io/react/docs/dom-elements.html#style