React：如何将服务器端 HTML 与 React 组件和函数混合

Question

With Vue, I can easily add a Vue application as a wrapper over the server-side rendering HTML like:使用 Vue，我可以轻松地添加 Vue 应用程序作为服务器端渲染 HTML 的包装器，例如：

<body>
  <div id="appMain">
    <!-- This is the root element for Vue -->

    <!-- This is a server-side code -->

    <main role="main" class="container">
      <div class="row">
        <div class="col-md-8 items-list">
          <div
            class="item row no-gutters rounded overflow-hidden flex-md-row mb-4 h-md-250 position-relative"
          >
            <div
              class="col-md-3 col-sm-auto d-lg-block image-block"
              style="background-image: url(${item.cover_image_url}); background-color: ${item.cover_image_back or 'transparent'}"
            >
              <!--img src="${item.cover_image_url}" class="col-12"-->
            </div>
          </div>
        </div>
        <div>
          <!-- This is code for subscription, done in Vue -->
          <div class="subscription-form">
            <input
              type="email"
              placeholder="Enter your email"
              v-model="email"
            />
            <button class="" @click="subscribe()">
              <i class="far fa-paper-plane"></i>
            </button>
          </div>
          <div
            :class="{'message-success': success, 'message-error': error, 'message-info': info}"
          >
            {{message}}
          </div>
        </div>
      </div>
    </main>
  </div>
</body>

But I can't figure out how to do the same in React.但我不知道如何在 React 中做同样的事情。 As far as I know, all the content of root div will be replaced, and there is no way to create a kind of wrapper for React app or component.据我所知，root div 的所有内容都会被替换，并且没有办法为 React 应用程序或组件创建一种包装器。 I know, though, I can include separate components but it's not convenient.不过，我知道我可以包含单独的组件，但这并不方便。 The ideal would be the same as with Vue - to create a wrapper with functions.理想情况与 Vue 相同——创建一个带有函数的包装器。 Is this possible?这可能吗？

Answer 1

It is super simple, in your index.html , where you have added the html for the root div, you can add another div , with id of "component1" or any other name of your choice, and use React.render to target that div and render a react component (let's call it Component1 as well) onto it.这非常简单，在你的index.html中，你已经为根 div 添加了 html，你可以添加另一个div ，id 为“component1”或你选择的任何其他名称，并使用React.render来定位它div 并在其上渲染一个反应组件（我们也称它为Component1 ）。 so your modified index.html file will essentially be:所以你修改后的index.html文件基本上是：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <div id="component1"></div> <!-- This is your defined html div -->
  </body>
</html>

and then in your index.js file然后在你的index.js文件中

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

//add the below lines for a component called Component1

import Component1 from "./Component1.js";

ReactDOM.render(
    <Component1 />,
  document.getElementById('component1')
);

serviceWorker.unregister();

EDIT编辑

TLDR; TLDR; You can target any element in the html and render a react component to it using ReactDOM.render() .您可以将 html 中的任何元素作为目标，并使用ReactDOM.render()向其呈现反应组件。 You can refer to the docs for usage可以参考文档使用

React：如何将服务器端 HTML 与 React 组件和函数混合

问题描述

1 个解决方案

解决方案1
0 2020-10-11 18:45:17

React：如何将服务器端 HTML 与 React 组件和函数混合

问题描述

1 个解决方案

解决方案1 0 2020-10-11 18:45:17

解决方案1
0 2020-10-11 18:45:17