我应该在React项目中将html包装元素放在哪里？

Question

我开始反应。所以我和bootstrap有这个简单的项目

我想重用HTML结构：

<div className="container">
  <div className="row">
    <div className="col-lg-8 col-md-10 mx-auto">
      {props.children}
    </div>
  </div>
</div>

所以，每当我调用这个结构时，3 div将包装我的子元素。对？。

一开始我在“header”组件中创建了这样的东西

const Wrapper = (props) => (
        <div className="container">
          <div className="row">
            <div className="col-lg-8 col-md-10 mx-auto">
                  {props.children}
            </div>
          </div>
        </div>
)

并且很容易从类中调用该元素：

function HeaderContent (props) {
  return (
  <SimpleWrapper>
    <div className="col-lg-8 col-md-10 mx-auto">
      <div className="site-heading">
          <h1>{props.h1title}</h1>
        <span className="subheading">{props.spantitle}</span>
      </div>
    </div>
  </SimpleWrapper>
  )
}

但是现在，我想回忆一下其他组件的包装器。我该怎么办？我的解决方案是创建一个名为：Wrapper.js的独立组件，并在其中声明我的包装器。这可行吗？

谢谢，抱歉这个虚拟问题。

Answer 1

反应的前提是将UI分解为独立且可重用的组件，因此您提出的添加“包装”组件的解决方案是正确的。