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"）。

React中的条件格式-添加或附加CSS类

1 个答案: