Question

我应该如何在我的html中创建一个部分：创建一个根div并用<Header/>和<Footer/>等组件填充它，或者创建一些html部分并用相应的组件填充每个部分？

Answer 1

我发现拥有一个包含页眉和页脚组件的单个根组件对我来说更加清晰：

class RootComponent extends React.Component {
  render() {
    return (
      <Header />

      {this.props.children}

      <Footer />
    );
  }
}

这允许我渲染我的组件，而不必使用页眉和页脚组件来膨胀它们。如果我不使用此设置，每次创建新页面时都必须包含页眉和页脚组件，这也很烦人。

Answer 2

由于React组件是可组合的，因此根据页眉/页脚的复杂程度，这两种方法都可以正常工作。如果它们足够简单，那就可以了（我为了简单起见使用了无状态功能组件）：

function Root() {
  return (
    <div>
     <header>/* simple header content */</header>
     <footer> /* simple footer content */</footer>
    </div>
  )
}

但随着header和footer标记内的内容变得更加复杂，您可以将它们纳入自己的组件中，以保持文件的小巧性和可读性：

function Header() {
  return (
    <header>
     // complex content
    </header>
  )
}
// Similar for Footer component
function Root() {
  return (
    <div>
      <Header/>
      <Footer/>
    </div>
  )
}

如果没有您的更多信息（如示例页眉和页脚），我们无法提供更多建议。

如何使用React创建节

2 个答案: