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

Question

我对 react 还很陌生，只是想在我深入了解它之前以右脚下车，不得不回去改变一切。

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

你如何将语义 html 融入 react 中？还有一个可能的第二个问题，它如何与组件一起工作？如果我有多个组件，每个组件都有一个 <header>或者什么， react 如何编译？我要一个 <header>和 <footer>在每个组件内？或者我的导航栏组件只是包含在 <header> 中而我的页脚组件将被包含在 <footer> 中其他一切都会有自己的<main> ?在这一点上，我觉得我想多了，但是当我尝试开始实际写作时，我陷入了困境。

Answer 1

看来你确实是想多了。
React 允许您使用任何类型的有效 HTML 元素(语义或非语义)构建和组合组件。

构建可访问的网站是一种很好的做法。考虑到这一点，您可以将各种语义元素划分为组件。这些组件可以是 Class components or Functional components (如果您使用的是 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 元素放在单个组件中。不过，把功能分开就好了，这反过来教你 how to compose components ，这是他们的主要内容之一 design principles .