如何在Vue中嵌入React组件？如何在React中嵌入Vue组件？

Posted 2023-03-29

参考技术A

日常在开发中总是会遇到各种奇怪的需求，
最近在开发一个多人合作的项目时变遇到一个奇怪的需求，
对方之前开发了一个react组件，要求在这期迭代中嵌入到vue项目中。

npm i -S vuera
npm install --save react react-dom

这个时候发现第一个问题：

不难发现，这是vue项目中未jsx文件格式的问题所导致
解决办法：
编辑webpack.base.conf.js，加入对jsx的支持

这个时候第二个问题出现了：

原因：
.babelrc文件中默认引入了transform-vue-jsx，此插件将jsx转义成h function的形式供vue调用。

解决办法：
npm install --save-dev babel-plugin-transform-react-jsx
并且在.babelrc文件中
用transform-react-jsx替换transform-vue-jsx

至此，我们便完成了在vue项目中引入react组件的目的
效果：

npm i -S vuera
npm install --save vue

如何在 Docusaurus v2 中嵌入全局 React 组件？

【中文标题】如何在 Docusaurus v2 中嵌入全局 React 组件？

【英文标题】：How do I embed global React components in Docusaurus v2?

【发布时间】：2020-09-13 06:19:24

【问题描述】：

我发现可以使用 MDX 嵌入 React 组件：https://v2.docusaurus.io/docs/markdown-features/#embedding-react-components-with-mdx

但是，此方法适用于特定页面。如何使它适用于文档中的所有降价文件？我正在尝试添加与上面链接中类似的组件来更改某些内联文本的样式。我尝试编辑 src/pages/index.js 但没有成功。

const HighlightGreen = (children) => (
  <span
    style=
      backgroundColor: '#00a400', // green,
      borderRadius: '2px',
      color: '#fff',
      padding: '0.2rem',
    >
    children
  </span>
);

【问题讨论】：

用户手册中的所有markdown文件是什么？

@YangshunTay 我的意思是“文档”。我更新了我的问题。

【参考方案1】：

现在您似乎可以通过创建website/src/theme/Root.js 文件来“调整”根组件，根据：https://docusaurus.io/docs/using-themes#wrapper-your-site-with-root