将类名添加到React根组件或更改结构

Question

我正在尝试将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;

未添加到插入的根元素的classNames。

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

Answer 1

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

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

然后：

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

希望有帮助。