Условное форматирование в React - добавление или добавление CSS классов

Question

Какой более краткий способ применить условное форматирование к этому утверждению?

const PaginationStorePageLink = ({ store, pageNum }) => (observer(({ PaginationStore }) => {
  if (this.props.store.currentPage === this.props.pageNum) {
    return (
      <PaginationLink className={styles.bold} onClick={this.props.store.goToPage(this.props.pageNum)} />
    );
  }
  return (
    <PaginationLink className={styles.primary} onClick={this.props.store.goToPage(this.props.pageNum)} />
  );
}));

В частности, если номер текущей страницы определяется как текущий, следует применять класс «.bold». В противном случае следует применять класс «.primary».

Как связанный вопрос, возможно ли добавлять классы друг к другу? Так, например, класс «.primary» применяется в любом случае, а «.bold .primary» применяется, если выполняются условия?

Answer 1

Вы можете сделать что-то вроде этого:

const PaginationStorePageLink = ({ store, pageNum }) => (observer(({ PaginationStore }) => {
  const style = store.currentPage === pageNum ? styles.bold : styles.primary;

  return (
    <PaginationLink className={style} onClick={store.goToPage(pageNum)} />
  );
}));

По второму вопросу вы можете применить оба класса (".bold .primary"), если вы хотите применить стили из обоих классов CSS.