如何在 html 页面中嵌入 React 组件答案

【问题标题】：How to embed React Components in html pages如何在 html 页面中嵌入 React 组件
【发布时间】：2018-04-01 21:08:26
【问题描述】：

我想构建一个类似的 React 组件

class MyComponent extends React.Component {
    render(){
        return (<div>This is a simple component</div>);
    }
}

并像使用它

<MyComponent></MyComponent>

在几个不同的页面中，甚至在一个 html 页面中多次。

我不想创建一个 SPA 只是为了使用 React 组件来增强我的 Web 应用程序的 UI。

【问题讨论】：

ReactDOM.render( <MyComponent />, document.getElementById('myID') ); 并且在你的 html 文件中有这个 <div id="myID" /> 所以你有选择，这也可以在 jQuery 中使用对话框组件来完成
你在用 reactjs 和 react-router-dom 吗？
不，我刚开始学习 React，我希望有人帮助我找到正确的方法。

标签： reactjs

【解决方案1】：

使用

ReactDOM.render(<MyComponent />, document.getElementById('id'));

您可以像这样在 HTML 中呈现：

<div id="id"></div>

【讨论】：

感谢您的回答，但我想知道是否可以像那样在我的 HTML 中呈现它以及如何呈现。

【解决方案2】：

React 现在无法满足您的要求，您想使用所谓的 Web 组件。

https://webdesign.tutsplus.com/articles/how-to-create-your-own-html-elements-with-web-components--cms-21524

阅读本文以了解如何操作。

另一种方法显然是

ReactDOM.render(<MyComponent />, document.getElementById('id'));

如果你必须坚持使用 React。

【讨论】：

感谢您的回答。我想坚持使用 React，所以我想知道我是否使用您建议的方法，对于我将要使用的每个组件（甚至多次相同）我必须调用 ReactDOM.render？保存此 Javascript 代码的最佳做法是什么？我正在考虑让每个不同的 html 页面都有一个带有 ReactDOM.render 调用的不同 js 文件。组件将单独保存。
是的，如果你刚刚开始转换到 React，那么到处调用它是一种相当标准的做法。我可以告诉你两种方式，由你来选择。 1) 在同一个 js 文件中渲染调用：保持代码合并。 2) 在同一个 js 文件之外渲染调用：一切都遵循导出语法，当你完全转移到 React JSX 时，一切都更容易使用

【解决方案3】：

在 index.jsx 中更改元素根 getElementById 的典型搜索并将逻辑更改为 getElementsByTagName 方案。

let elements=document.getElementsByTagName('MyComponent');
for (element of elements){
    ReactDOM.render( <MyComponent />, element );
}

【讨论】：

【解决方案4】：

这里有几个选项可以探索

包裹捆绑 https://javascriptpros.com/creating-react-widgets-embedded-anywhere/
重定向包

https://jhinter.medium.com/using-react-based-web-components-in-wordpress-f0d4097aca38

【讨论】：

【解决方案5】：

简单地将 React 组件添加到 HTML 代码中是不可能的，因为 <MyComponent></MyComponent> 根本不是 HTML，它是 JSX。

说明

JSX 是一种可以“转译”为 Javascript 的特殊语法，所以本质上<MyComponent></MyComponent> 最终会变成 Javascript 代码，显然不能只放入 HTML 代码中。

然后从 JSX 生成的 Javascript 代码将被执行并生成实际的 HTML 代码。

可以在 JSX 中添加 HTML 标签，因为 HTML 可以被解释为 JSX（也可以转译为 Javascript），例如：

class MyComponent extends React.Component {
    render(){
        return <div>
            <h2>HTML in JSX works</h2>
            <SomeOtherJsxComponent />
        </div>;
    }
}

但是不可能将 JSX 添加到 HTML 中，例如：

<body>
    <div>
        <JsxInHtmlDoesNotWork />
    </div>
</body>

React 是 Javascript，因此将 Javascript 功能添加到 HTML 所需的一切也适用于将 React 添加到 HTML。

（最近的）解

所以你可以做的就是将你现有的 HTML 移动到一些 JSX 包装器中（这可能不是你想要做的，因为这朝着创建 SPA 的方向发展，这是你不想要的），例如：

<html><head>
    <title>My web site</title>
</head><body>

<h1>Some HTML title</h1>
<p>Some HTML content.</p>

<!-- add a container, where you want to include react components -->
<div id="injected-react-content"></div>

<!-- import the react libraray -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<!-- setup react root component other components -->
<script type="text/babel">
    class RootComponent extends React.Component {
        render(){
            return <div>
                <MyComponent />
            </div>;
        }
    }

    class MyComponent extends React.Component {
        render(){
            return (<div>This is a simple component</div>);
        }
    }

    const domContainer = document.querySelector('#injected-react-content');
    ReactDOM.render( React.createElement(RootComponent), domContainer );
</script>

</body></html>

有关如何将 React 添加到现有 HTML 网站的更多背景信息，请参阅例如：

【讨论】：