屏蔽外部样式的 React 组件

Question

这并不是 React 特有的问题，而是如何确保 React 组件的样式不受它们嵌入的任何页面的影响。

目前，我正在将一个反应组件嵌入到一个页面（不是单页反应应用程序）中，并且有一些与库的 ui 混淆的全局样式。希望修复实际的 React 库，而不是更改我的代码来缓解这种情况。

Answer 1

看看这个react-iframe。

用法

var Iframe = require("react-iframe");
<Iframe url="http://www.example.com" [string width, [string height]] />

主要思想是将您的组件包装在 iframe 中，这将缓解与父页面的所有冲突问题。作者写了一个blog post，讲述了这种方法的好处以及他是如何实现它的。