如何将语义 HTML 合并到 React 中？

Question

我对反应还很陌生，只是想在我深入其中并必须回去改变一切之前先起步。

我想知道如何在 React 中处理语义 html。<header>诸如、<nav>、等之类的东西。<aside>我知道这些标签对于可访问性等原因非常重要，并且我希望在我的 React 应用程序中具有相同类型的结构。我只是不知道该怎么做。在网上阅读有关它的内容时，我发现这<fragment>可能是我应该使用的东西，但它似乎没有实现我想要的语义 html 的可访问性部分。

你如何将语义 html 合并到 React 中？还有一个可能的第二个问题，它如何与组件一起工作？如果我有多个组件，每个组件都有一个<header>或某个东西，那么反应如何编译它？我在每个组件中都会有一个<header>and吗？<footer>或者我的导航栏组件将被包含在其中<header>，而我的页脚组件将被包含在其中<footer>，而其他所有组件都会有自己的<main>？在这一点上，我觉得我想得太多了，但当我尝试开始实际写作时，我陷入了困境。

Answer 1

看来你确实想多了。React 允许您使用任何类型的有效 HTML 元素（语义或非语义）构建和组合组件。建立可访问的网站是一个很好的做法。考虑到这一点，您可以将各种语义元素划分为组件。这些组件可以是类组件或功能组件 （如果您使用React Hooks，它们都是功能组件）。这是一个简单的例子：class App extends React.Component {  state = {    name: 'Amazing Startup'  }    render() {    return(      <React.Fragment>        <Header name={this.state.name}/>        <Main />        <Footer />      </React.Fragment>    )  }}function Header({ name }) {  return (    <header>      <h1>Hello! We are {name}</h1>    </header>  )}function Main() {  return (    <main>      <p>Important stuff goes here..</p>    </main>  )}function Footer() {  return (    <footer>      <p>Made with React - 1 Hacker Way Menlo Park, CA 94025</p>    </footer>  )}ReactDOM.render(<App />, document.getElementById('root'));body {  font-family: sans-serif;   min-height: 100vh;   margin: 0;}#root {  display: grid;  grid-template-columns: 1fr;  grid-template-rows: 1fr 2fr 1fr;}header {  font-size: 0.8rem;  background-color: deepskyblue;  padding: 0.5rem;}main {  background-color: limegreen;  padding: 0.5rem;}footer {  background-color: orange;  padding: 0.5rem;}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script><div id="root"></div>值得注意的是，您绝对可以将所有必需的 HTML 元素放置在单个组件中。然而，分离功能是件好事，这反过来又会教您如何组合组件，这是它们的主要设计原则之一。

Answer 2

所有支持的 html 属性JSX 支持所有 html 标签。所有正常的 html 语义都适用于 React JSX。FragmentReact.Fragment 组件允许您在 render() 方法中返回多个元素，而无需创建额外的 DOM 元素正确的 React JSX 语法是每个 React 组件返回一个节点，通常实现如下render (   <div>     { /* multiple children */ }   </div> );但这基本上将一个无用的 div 注入到 DOM 中。Fragment允许以下不会污染 DOM 的操作。render (  <Fragment>     { /* multiple children */ }       </Fragment>)       ;