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

对于第二个问题，如果您希望应用来自两个 CSS 类的样式，则可以应用两个类 (".bold .primary")。