javascript 将react组件导出到外部域(包括样式)

q8l4jmvw 于 2023-05-16 发布在 Java

关注(0)|答案(1)|浏览(92)

我设法导出了npm run build（create-react-app）的输出，我在index.js中修改了它，如下所示：

window.inject = (rootElem) => {
  const root = ReactDOM.createRoot(rootElem);
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
};

if (process.env.NODE_ENV !== "production") {
  window.codeBuilder = window.inject(document.getElementById("root"));
}

然后我运行npm run build && serve -s build，所以在外部域中，我加载我的组件如下：

<div id="myComponentHere"></div>
<script src="http://localhost:3000/static/js/main.min.js"></script>
<script>
  window.inject(document.querySelector('#myComponentHere'));
</script>

问题是，我没有得到的css样式与它。有没有一个包或更干净的方式让我以封装的方式包含样式（没有iframe或手动加载样式？）

JavaScript

来源：https://stackoverflow.com/questions/76235969/export-react-component-to-external-domains-including-styles

1条答案

按热度按时间

im9ewurl1#

为此，我们需要：

从JS文件捆绑并注入CSS
确保我们的CSS类名选择器不会与目标页面冲突

使用JS注入CSS：

使用npm i -D webpack-cli安装webpack-cli
Webpack本身已与CRA一起安装
使用以下两种方法之一捆绑项目：
将CRA构建与此处的配置捆绑在一起
通过将条目设置为index.js直接捆绑项目
对于这两种方法，请确保您的webpack配置为输出JS文件：

output: {
 filename: "main.js",
}

1.送达您的文件，npx webpack serve a.如果您要捆绑CRA构建，请确保首先构建它。

避免CSS类名冲突

命名任何捆绑的CSS文件[name].module.css。
在文件名中包含module对于Webpack和其他bundler来说非常重要，可以正确转换CSS文件，散列类名，并将这些散列导出到您的模块。
在组件中只使用这些CSS模块。

CSS示例：

`Component.module.css`

.container {
  width: 400px;
  height: 300px;
}

.warning {
  color: red;
}

`Component.js`

import styles from './Component.module.css'

const Component = () => (
  <div className={styles.container}>
    <p className={styles.warning}>Warning</p>
  </div>
)

赞(0）回复(0）举报 2023-05-16

我来回答