如何将语义 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。

Fragment

React.Fragment 组件允许您在 render() 方法中返回多个元素，而无需创建额外的 DOM 元素

正确的 React JSX 语法是每个 React 组件返回一个节点，通常实现如下

render (
  <div>
    { /* multiple children */ }
  </div>
);

但这基本上将一个无用的 div 注入到 DOM 中。Fragment允许以下不会污染 DOM 的操作。

render (  <Fragment>
    { /* multiple children */ }
      </Fragment>)
      ;