如何在 React 中返回 HTML答案

【问题标题】：How to return HTML in React如何在 React 中返回 HTML
【发布时间】：2020-03-04 03:17:20
【问题描述】：

在开发我的项目时，我会以其他人为例。当我查看 Instagram 网站时。我看到用户登录时html的类名发生了变化。我可以知道如何实现这一目标吗？据我所知，react 只存在于 html 结构中的一个 div 中。

// This code will render a component in the html root.
ReactDOM.render(<App />, document.getElementById('root'));

// But how to serve a whole new html file in react

如何在反应中提供全新的 html 文件？是不是违反了react的概念？

【问题讨论】：

我认为您应该更具体地了解您是否尝试使用您尝试过的代码以及您面临什么样的错误来实现
我想实现改变html的类名或者在网站中返回一个全新的html。谢谢
你试过什么？显示代码。 React.DOM 渲染也不是这里的方法。您必须更改 App 组件并放置一些条件子句。
你想提供一个新的 index.html 吗？你不能用 react 来做到这一点，你必须在为这些文件提供服务的服务器端代码中更改它。

标签： html reactjs

【解决方案1】：

HTML 和文档正文超出了 React 的 DOM 处理领域。所以你可以使用旧的querySelector 来设置类名。

function LoginPage() {
  useEffect(() => {
    document.querySelector('html').classList.add('login-page');
  }, []);
  return (
    // stuff
  );
}

一个方便的包是 React 生态系统，React Helmet

import {Helmet} from "react-helmet";

function LoginPage() {
  return (
    <Helmet>
      <html className="loginPage" {...anyOtherStuff} />
      <body {...attributesOnBody} />
    </Helmet>
  );
}

如果您想在 body 中添加与根节点相邻的节点，或者 React 为您提供了一个名为 Portals 的解决方案，可以在任何地方渲染。

为了改变 index.html 本身的能力，你不会再为自己构建一个 SPA ，这似乎是使用 React 的情况。

【讨论】：

【解决方案2】：

您应该在 html 输入中添加一个类来检索它。这是一个例子：

import React from 'react';
import ReactDOM from 'react-dom';

class X extends React.Component {
  render() {
    return <h2>TEXT HERE</h2>;
  }
}

ReactDOM.render(<X/>, document.getElementById('root'));

【讨论】：

【解决方案3】：

React 以一种将自身附加到某个 DOM 元素的方式工作。在您的情况下，您将其附加到具有id 的root 的某个元素。

TLDR；您的 index.html 将在浏览器运行时包含带有 root id 的元素内的应用程序代码。您可以通过使用浏览器开发人员工具检查它来查看它。

您的<App /> 是您的应用程序的根，如果您使用浏览器的dev tools 并检查DOM 树，您将在其中看到组件。它们只是由 React (ReactDOM) 动态附加，而 React 控制着事物何时以及如何呈现。

如果您的组件看起来像：

import React from 'react';

function App() {
  return <h1 className="title">Hello!</h1>;
}

在Dev tools 中，您的 DOM 结构将如下所示：

<div id="root">
  <h1 class="title">Hello!</h1>
</div>

在这里您可以看到您之前附加了<App /> 的带有root id 的元素，您可以看到<App />、<h1 class="title" /> 的内容以及类。

这也是 Instagram 和大多数单页应用程序或 SPA 的工作方式。

还可以渲染static version of your application。

【讨论】：