我应该在React Project中的哪里放置html wrapper元素？

Question

I am starting with react. So I have this simple project with bootstrap

I want to reuse an HTML structure:

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

So, everytime that I call this structure 3 div's will wrap my child element. right?.

At the beginning I create something like this in my " header " component

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

And was easy to call that element from the class:

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>
  )
}

But now, I want to recall the wrapper from other components. What should I do? My solution was to create a separate component called: Wrapper.js and declare my wrapper inside it. Is this viable?

thanks, and sorry for the dummy question.

Answer 1

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