Reactjs 添加类名以响应根组件或更改结构

我试图将flexbox与React组件一起使用，但正在插入根div。我无法将类名添加到根div（省略）

我认为它可以被分成更小的部分，但我不知道怎么做

现在的结构是这样的：

这就是我想要的结构：

当前（精简）App.js代码：

const Hit = ({hit}) =>
  <div className="col-xl-3 col-lg-4 col-md-6 col-sm-12 d-flex align-items-stretch var-result">
    <div className="card">
      <div className="card-block">
        <div className="row flex-wrap">
            <div className="col-md-8"><h4><Highlight attributeName="name" hit={hit}/></h4></div>
            <div className="col-md-4 text-right">
              <img src={hit.image} className="img-fluid" alt=""/>
            </div>
        </div>
        <p className="d-inline-block db-name">Database name</p>
        <p className="d-inline-block vendor-name">${hit.price}</p>
        <p className="card-text small"><Highlight attributeName="description" hit={hit}/></p>
      </div>
    </div>
  </div>

const SearchResultContent = () =>
  <section className="row grey-bg mt-5 overflow-y">
    <Hits hitComponent={Hit} className="d-flex flex-wrap"/>
  </section>


class App extends Component {
  render() {
    return (
      <InstantSearch
        appId="latency"
        apiKey="3d9875e51fbd20c7754e65422f7ce5e1"
        indexName="bestbuy">

        <HeaderNav />
        <div className="container-fluid">
          <div className="row">
            <SideBar/>
            <Main/>
            <SearchResultContent/>
          </div>
      </div>
    </InstantSearch>
    );
  }
}

export default App;

const Hit=（{Hit}）=>
数据库名称

${hit.price}

const SearchResultContent=（）=>
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

未添加到插入的根元素的类名

<Hits hitComponent={Hit} className="d-flex flex-wrap"/>

---

不确定我是否理解，但我认为您需要将这些额外的类作为道具传递，例如：

<Hits hitComponent={Hit} classNames="d-flex flex-wrap"/>

然后：

const Hits=（{hit，classNames}）=>
...

---

希望有帮助。

你找到答案了吗？不幸的是没有。我想我用的是插件购物车？这个问题已经过时了（2岁以上）。

const Hits = ({hit, classNames }) =>
  <div className={classNames}>
     
    ...
    
  </div>