javascript - React - 在窗口内渲染 html 而不会影响页面其余部分的最佳实践

Question

我从后端获得了 HTML，我需要在 div 内渲染它或其他任何工作

我在显示之前对 HTML 进行了清理

import DOMPurify from "dompurify";

   ......

 var cleanHtml = DOMPurify.sanitize( HtmlPassedFromBackEnd , {
      FORBID_TAGS: ["style"],
    });

然后将经过清理的 HTML 传递给组件<HtmlComponent template={cleanHtml} />

import React from "react";

export default class HtmlComponent extends React.Component {
   
  
    render() {
      return <div dangerouslySetInnerHTML={{__html: this.props.template }}/>
    }
  
  }

它在大多数情况下都可以正常工作，但在另一个示例中失败了有没有像 webview 这样的东西我可以安全地呈现我的 HTML

标签： javascriptreactjs

Answer 1

感谢@diedu，我创建了一个与 iframe 匹配的漂亮组件

import React from "react";
import DOMPurify from "dompurify";
import StyledFrame from "react-styled-frame";
import styled from "styled-components";


const InnerBox = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
`;
export default class HtmlComponent extends React.Component {
   
  
    render() {
      var {template} = this.props
      template  = DOMPurify.sanitize(template, {
        FORBID_TAGS: ["style"],
      });

      return <StyledFrame
      style={{
        width: "100%",
        margin: "0 auto"
      }}
    >
      <InnerBox>
        <div  style={{
                      overflow: "auto",
                      width:"100%"
                    }}
              dangerouslySetInnerHTML={{ __html: template  }} />
      </InnerBox>
    </StyledFrame>
      
    }
  
  }