Question

我正在像下面那样开发几个React项目。

index.js

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

ReactDOM.render(<App />, getElementById("root"));

App.js

import React from 'react';
const App = () => (
  <div className="App">
    <header>header</header>
    <main>main</main>
    <footer>footer</footer>
  </div>
);

index.html

<html>
  <head>...</head>
  <body>
    <div id="root"></div>
  </body>
</html>

当我在它们上面构建时，我可以得到下面的输出。

index.html

<html>
  <head>...</head>
  <body>
    <div id="root">
      <header>header</header>
      <main>main</main>
      <footer>footer</footer>
    </div>
  </body>
</html>

，我想知道这种标记结构是否可以。

因为<body />标签具有<div id="root" />且具有<header />和<main />和<footer />。

我认为应该像下面这样更改。

index.html

<html>
  <head>...</head>
  <body>
    <header>header</header>
    <main>main</main>
    <footer>footer</footer>
  </body>
</html>

所以，我试图像下面那样更改代码。

index.js

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

ReactDOM.render(<Header />, getElementById("header"));
ReactDOM.render(<App />, getElementById("root"));
ReactDOM.render(<footer />, getElementById("footer"));

App.js

import React from 'react';
const App = () => (<>App</>);
const Header = () => (<>Header</>);
const Footer = () => (<>Footer</>);

index.html

<html>
  <head>...</head>
  <body>
    <header id="header"></header>
    <main id="root"></main>
    <footer id="footer"></footer>
  </body>
</html>

我想知道哪种结构更好？为什么？

Answer 1

div包装了您的应用程序后，您担心什么？根本没有问题。 div（和span）是非语义元素，因此它们本身对文档结构没有任何影响。

这是错误的，不要像这样启动您的React应用程序：）

ReactDOM.render(<Header />, getElementById("header"));
ReactDOM.render(<App />, getElementById("root"));
ReactDOM.render(<footer />, getElementById("footer"));

它引导了三个独立的应用程序，而无法在它们之间随意共享状态。

Answer 2

React告诉我们为什么不应该使用<body>作为将应用程序安装到的容器：

如果您尝试这样做：

const rootElement = document.body;
ReactDOM.render(<App />, rootElement);

您将收到以下警告：

警告： render（）：不建议将组件直接呈现到document.body中，因为其子级通常受第三方脚本和浏览器扩展的操纵。这可能会导致微妙的和解问题。尝试渲染到为您的应用程序创建的容器元素中。

这就是为什么您应该坚持根<div id="root">

这不会损害您的网站语义。

https://www.w3schools.com/html/html5_semantic_elements.asp

非语义元素的示例和-不告知其内容

注意：：如果按照建议的方式进行操作，则需要安装3个不同的组件。一个用于header，一个用于main，一个用于footer。您将如何在它们之间共享状态？ header组件如何知道state组件上发生的body变化，反之亦然？

来自https://reactjs.org/docs/thinking-in-react.html：

记住：反应只涉及组件层次结构中的单向数据流。可能尚不清楚哪个组件应该拥有什么状态。对于新手来说，这通常是最具挑战性的部分，因此请按照以下步骤进行操作：

对于应用程序中的每个状态：



识别根据该状态呈现内容的每个组件。



找到公共所有者组件（在需要层次结构状态的所有组件之上的单个组件）。



公共所有者或层次结构中更高级别的其他组件都应拥有该状态。



如果找不到拥有状态的有意义的组件，请创建一个仅用于保存状态的新组件，然后将其添加到公共所有者组件上方的层次结构中。
< / li>

React中的标记结构

2 个答案: