Question

我有一个非常简单的可重用组件，用于显示通过道具传递的一些HTML。

export class HtmlPreview extends React.Component {
  componentDidMount() {
    this.rendered.contentDocument.body.innerHTML = this.props.body;
  }
  render() {
    return(
      <div>
        <iframe ref={(iframe) => this.rendered}></iframe>
      </div>
    );
  }
}

图像我称这个组件为：

<HtmlPreview body={'<h1>Hello World</h1>'}/>

但是，如果不抱怨.contentDocument未存在于未定义的对象中，我总是会得到一个没有内容的空白iframe。

我感谢任何建议。

Answer 1

为什么使用iframe？您可以使用iframe显示其他网址，例如

import React from 'react';

const HtmlPreview = ({ url }) => <iframe src={url} title="myIframe" />;

export default HtmlPreview;

如果您只想显示HTML预览，则可以使用带滚动条的div：

import React from 'react';

const HtmlPreview = ({ children }) => (
  <div style={{ width: 200, height: 200, overflowY: 'scroll' }}>{children}</div>
);

export default HtmlPreview;

使用如下：

<HtmlPreview><h1>My Preview</h1></HtmlPreview>

Answer 2

作为斯科特，我也不知道那里的iframe。将html作为prop传递给普通字符串？如果是，则应使用“dangerouslySetInnerHTML”。 https://zhenyong.github.io/react/tips/dangerously-set-inner-html.html

Answer 3

我很遗憾在Component中为变量分配iframe引用。

iframe ref={(iframe) => this.rendered = iframe}></iframe>

这允许在类方法中设置this.rendered内容。

通过React中的道具在iframe中显示html内容

3 个答案: