Question

我正在尝试将text / html嵌入到反应模态组件中。但是当我用电子操作我的应用程序时，Google Inspector会向我显示一些错误。

Uncaught invariant.js：38 Uncaught Invariant Violation：style prop期望从样式属性到值的映射，而不是字符串。例如，使用JSX时style={{marginRight: spacing + 'em'}}。此DOM节点由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%'}}>

用这个

{{1}}

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

如何在反应组件中嵌入text / html？

1 个答案: