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分解为独立且可重用的组件，因此您建议的添加“包装”组件的解决方案是正确的。

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

1 个答案: