ReactDOM.render( <App />, document.getElementById('root')
那么，当我在应用程序的结尾看到这样的东西时，我应该理解什么呢？“root”或“demo”代表什么？
7gcisfzg1#
它是存在于原始HTML中的元素，所有React内容都将进入该元素。例如，如果您的HTML包含：
<body> <div>Maybe some other content here</div> <div id="root"></div> </body>
React渲染到#root意味着应用渲染的所有内容都将被放入该元素中：
#root
<div id="root"> <!-- App populates this element --> </div>
选择要填充的元素可以是您想要的任何元素-它不一定是root或demo。
root
demo
q35jwt9p2#
我假设您使用的是Create React App，请查看public/index.html，您将看到<div id="root"></div>，即document.getElementById('root')所指的内容。
public/index.html
<div id="root"></div>
document.getElementById('root')
mi7gmzs63#
在React应用程序的HTML主文件index.html中，通常您可能会看到带有id=root的<div>标记。此代码：
index.html
id=root
<div>
方法：使用id=root将整个React应用程序渲染到元素中。
k4aesqcs4#
许多React初学者对这个东西很好奇，我也是。因此，我将尝试用简单的话解释这一点。当浏览器从服务器获得响应并开始渲染时，它会转到根文件（大多数情况下为public/index.html），并首先渲染相同的文件。在此html中写入了一个id为**“root”**的<div>元素<div id="root"> <div>然后控制转到另一个文件index.js。在此.js文件中，使用了一个组件（在大多数React应用程序中，此组件称为<App/>.
<div id="root"> <div>
index.js
<App/>.
ReactDOM.render( <App /> document.getElementById("root"), );
此<App/>组件是屏幕上呈现的第一个组件。每个组件都在此组件或其子组件中定义。document.getElementById("root")呈现index.html文件，该文件是根文件。这就是所有组件的呈现方式，您的React应用程序开始工作。
<App/>
document.getElementById("root")
4条答案
按热度按时间7gcisfzg1#
它是存在于原始HTML中的元素，所有React内容都将进入该元素。例如，如果您的HTML包含：
React渲染到
#root意味着应用渲染的所有内容都将被放入该元素中：选择要填充的元素可以是您想要的任何元素-它不一定是
root或demo。q35jwt9p2#
我假设您使用的是Create React App，请查看
public/index.html，您将看到<div id="root"></div>，即document.getElementById('root')所指的内容。mi7gmzs63#
在React应用程序的HTML主文件
index.html中，通常您可能会看到带有id=root的<div>标记。此代码：
方法：使用
id=root将整个React应用程序渲染到元素中。k4aesqcs4#
许多React初学者对这个东西很好奇，我也是。因此，我将尝试用简单的话解释这一点。
当浏览器从服务器获得响应并开始渲染时，它会转到根文件（大多数情况下为
public/index.html），并首先渲染相同的文件。在此html中写入了一个id为**“root”**的
<div>元素<div id="root"> <div>然后控制转到另一个文件
index.js。在此.js文件中，使用了一个组件（在大多数React应用程序中，此组件称为
<App/>.此
<App/>组件是屏幕上呈现的第一个组件。每个组件都在此组件或其子组件中定义。document.getElementById("root")呈现index.html文件，该文件是根文件。这就是所有组件的呈现方式，您的React应用程序开始工作。