代码之家 › 专栏 › 技术社区 › ValRob

在react项目中,我应该在哪里放置HTML包装器元素?

components reactjs javascript

ValRob · 技术社区 · 6 年前

我从反应开始。所以我有一个简单的项目 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 在里面声明我的包装。 这可行吗?

谢谢,对这个愚蠢的问题感到抱歉。