Javascript 如何使用React组件作为遗留HTML/JS应用程序的一部分？_Javascript_Reactjs

Javascript 如何使用React组件作为遗留HTML/JS应用程序的一部分？

javascript reactjs

Javascript 如何使用React组件作为遗留HTML/JS应用程序的一部分？,javascript,reactjs,Javascript,Reactjs,我有一个运行HTML/JS的旧web应用程序。我已经创建了一个新的react应用程序，我的目标是开始使用react开发新功能/页面，并在当前应用程序中实现它们主要目标是在React之外使用React组件，例如： <html> <head> <title> My old web applciation</title> // Imports for my react app / components </head> <body&g

我有一个运行HTML/JS的旧web应用程序。我已经创建了一个新的react应用程序，我的目标是开始使用react开发新功能/页面，并在当前应用程序中实现它们

主要目标是在React之外使用React组件，例如：

<html>
<head>
<title> My old web applciation</title>
// Imports for my react app / components
</head>
<body>

<!-- Old staff -->

<Footer someProp="1"/>

</body>
</html>


我的旧web应用程序
//为我的react应用程序/组件导入

到目前为止，我所拥有的：

对于整版功能，我使用了Iframe（并在React中为它创建了一个路由）
使用元素ID，例如：：

在反应中：

const GiveItem = ({ ...props }) => {

  console.log("init give item component");

  return (
    <section>
     Give Item
    </section>
  );
};

try {
  const domContainer = document.querySelector('#giveItem');
  render(e(GiveItem), domContainer);
} catch (e) {
  console.error('Failed to render give item', e);
}

export default GiveItem;

const GiveItem=（{…props}）=>{
log（“init give item组件”）；
返回(
赠品
);
};
试一试{
const domContainer=document.querySelector（“#giveItem”）；
呈现（e（给定项），domContainer）；
}捕获（e）{
console.error（'未能呈现给定项'，e）；
}
导出默认项目；

是否有合法的方法将react组件“导出”到HTML（外部react）并将其用作本机组件，如：

<GiveItem someProp="1"/>

使用Vue，我成功地做到了这一点，只需将最高级别的元素包装为：

    <div id="vapp">

 .... My old code

<VueComponent />


.... 我的旧代码

那么回到问题上来-我如何在遗留应用程序的不同部分显示/使用React组件作为本机HTML组件

谢谢

我将把我的答案分为三部分：

一般情况下，简单包含react

让你的榜样起作用

模块

（我将在下面使用。您也可以使用，我假设您熟悉这些。）

1.一般情况下，简单包含react 看

index.html：

2.让你的榜样起作用您的组件使用JSX。您需要使用babel将其传输到JS

GiveItem.jsx：
（没有必要调用它。jsx，但它是有意义的）

将JSX文件

/src/GiveItem.JSX

转换为

/dist/GiveItem.JS

中的JS文件：

yarn babel ./src/GiveItem.jsx --presets=@babel/preset-react --out-dir dist

（如果不存在，将创建

dist

文件夹）

如果现在将index.html复制到

/dist

，您的代码应与第1节中的代码相同。，在浏览器中打开

/dist/index.html

应该可以

3.模块当然，您可能希望导入其他react组件和子组件。
（而且您可能不想单独导入带有

标记的所有内容。）

如果已经设置了环境也许您的旧应用程序已经在一个纱线（或npm）环境中运行，那么您可能会对它感到满意

安装
```
纱线添加react
```
和
```
纱线添加react dom
```

删除两个

Wowww！多好的回答啊！谢谢我的遗留项目是简单的基于HTML/JS的遗留应用程序，没有npm或纱线。在“模块”部分我有点失去了你
const GiveItem = (props) => {
    console.log("init give item component");
    return React.createElement(
        "section",
        null,
        "Give item content"
    );
};

const domContainer = document.querySelector('#injected-react-content');

ReactDOM.render( React.createElement(GiveItem), domContainer );

const GiveItem = (props) => {
    return (
        <section>
            Give Item
        </section>
    );
};

const domContainer = document.querySelector('#injected-react-content');
ReactDOM.render( React.createElement(GiveItem), domContainer );

yarn add @babel/cli @babel/core @babel/plugin-transform-react-jsx @babel/preset-react --dev

yarn babel ./src/GiveItem.jsx --presets=@babel/preset-react --out-dir dist

<!-- import your react component -->
<script type="module" src="EntryIntoReactWorld.js"></script>

import SomeComponent from './SomeComponent';
import SomeOtherComponent from './SomeOtherComponent';

const ReactRoot = props => {
  return React.createElement(
      "div",
      null,
      React.createElement(SomeComponent, null),
      React.createElement(SomeOtherComponent, null)
  );
};

ReactDOM.render(
    React.createElement(ReactRoot),
    document.querySelector('#injected-react-content')
);