反应相当于 ng-class

Question

我在 angular 中有这个组件。我正在努力让它为 React 工作。我已经更改了原始 angular 代码中的大部分指令，但仍然使用 ng-class。我知道我可以使用 'classnames' npm 包来实现确切的目标。但是我的项目不允许安装任何第三方包。我做了一些研究，我也可以使用 classList from plain js 来实现它，但是，我对如何实现它感到困惑。

import React from 'react';

export default function commentNest(props) {
 return (
  <>
   <div className="su__row su__mx-sm-0 su__pt-sm-0  su__no-gutters">
    <div className="su__w-100 su__px-sm-0">
     <div className="su__tabing su__bg-white su__radius-1" ng-class="{su__loading: loadingResults}">
      <div className="NavBar">
       {props.clientFilters.sort((a, b) => {return a.index - b.index}).map(function (filter) {
        <div className="navbar-filter" style={{ display: clientFilters[0] && filter.values.length !== 0 ? 'block' : 'none' }}>
         <div style={{ display: filter.key == '_index' ? 'block' : 'none' }} className="su-tabsSection su__loading-view su__w-100 su__border-b su__text-nowrap" style={{overflowX: 'auto'}}>
          <div ng-class="{'active-type': activeType === 'all' && !users && !privateMessage }" className="inactive-type su__font-regular font-14 tabs su__cursor su__text-nowrap" onClick={() => callElasticFilterChange(true,'_index', 'all', 0, 0)}>
           {{languageDs['All Content']}}
          </div>
          {
           props.filter.values.map(function (filterType) {
            <div ng-class="{'active-type': activeType == filterType.Contentname && !users && !privateMessage}" className="inactive-type su__font-regular font-14 su__cursor su__text-nowrap tabs" onClick={() => callElasticFilterChange(filterType.selected,filter.key, filterType.Contentname, filter.order, $index)}>
             {{filterType.displayName === 'Sources' ? languageDs['Sources'] : filterType.displayName }}
            </div>
          })}       
          <div onClick={() => getUsers('Best Match','score')} ng-class="{'active-type': users}" className="inactive-type su__font-regular font-14 su__cursor su__text-nowrap tabs">
           {{languageDs['USERS']}}
          </div>
         </div>
        </div>
       })}
      </div>
     </div>
    </div>
   </div>
  </>
 );
};

Answer 1

您可以使用

<div className={`someClass ${someVar ? 'active' : ''} ${anotherVar ? 'someClass' : 'otherClass'}`}>
....
</div>

Answer 2

您应该检查这些 NPM 包：clsx, classnames

反应相当于 ng-class

React equivalent for ng-class

javascript

reactjs

react-router

react-redux

react-hooks