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

Posted 2023-03-15

【中文标题】将类名添加到 React 根组件或更改结构

【英文标题】：Add class names to React root component or change structure

【发布时间】：2018-01-23 01:56:46

【问题描述】：

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

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

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

【问题讨论】：

你找到答案了吗？

很遗憾没有。我想我使用的是插件购物车？这个问题已经过时了（2 岁以上）。

【参考方案1】：

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

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

然后：

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

希望对你有帮助。