时间戳

首页 > 解决方案 > 如何将语义 HTML 合并到 React 中？

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

问题描述

我对做出反应还很陌生，我只想在我深入其中并不得不回去改变一切之前从右脚下车。

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

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

标签： htmlreactjs

解决方案

看来你确实是多虑了。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 元素放在单个组件中。然而，分离功能很好，这反过来教你如何组合组件，这是它们的主要设计原则之一。

推荐阅读