Question

我需要在react组件中呈现本地html文件，但是我不知道如何。

如何在组件中呈现本地html文件？

Answer 1

如果dangerouslySetInnerHtml只是纯html，则可以使用。在React documentation中说：

dangerouslySetInnerHTML是React在浏览器DOM中使用innerHTML的替代品。通常，通过代码设置HTML是有风险的，因为很容易在无意间使用户遭受跨站点脚本（XSS）攻击。因此，您可以直接从React设置HTML，但是您必须输入angerousedSetInnerHTML并使用__html键传递对象，以提醒自己这很危险。例如：

function createMarkup() {
  return {__html: 'First &middot; Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

如果您正在寻找一个仅将html内容作为道具传递的组件，则应执行以下操作：

const HtmlComponent = ({
  htmlContent,
}) => (
  <Fragment>
    <StyledHtml
        dangerouslySetInnerHTML={{ __html: htmlContent }}
    />
  </Fragment>
);

如何在响应中呈现HTML文件？

1 个答案: