Tengo este componente en angular. Estoy tratando de hacer que funcione para reaccionar. Cambié la mayoría de las directivas presentes en el código angular original, pero me quedé atascado con ng-class. Sé que puedo usar el paquete npm 'nombres de clase' para lograr exactamente lo mismo. Pero mi proyecto no permite instalar ningún paquete de terceros. Investigué un poco que también puedo usar classList de js simple para lograrlo, pero estoy confundido sobre cómo implementarlo.

 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> </> ); };