Является ли сравнение строк правильным способом создания динамического стиля для вариантов в React-JSS? - PullRequest
Новая
       10

Является ли сравнение строк правильным способом создания динамического стиля для вариантов в React-JSS?

0 голосов
/ 20 сентября 2018

У меня есть песочница:

https://codesandbox.io/s/p2wy9pp8lx

У меня есть динамический стиль, подобный этому: 

const styles = {
  fooDisplay: props => ({
    display: props.variant === "foo" ? "block" : "none"
  }),
}

Для класса, подобного: 

const Something = ({ classes, children, variant }) => {
  return (
    <div className={classes.someThing}>
      <div> variant is : {variant}</div>
      <div className={classes.fooDisplay}>I only display if variant is foo</div>
    </div>
  );
};

Это делает то, что я хочу.

Является ли использование сравнения строк правильным способом для достижения этой цели?Или это будет плохо для производительности?

1 Ответ

0 голосов
/ 20 сентября 2018

На мой взгляд, рекомендуется экспортировать вариантные константы для каждого элемента, на который вы можете ссылаться при импорте элемента, пример будет выглядеть так:

<Button variant={Button.Variant.PRIMARY}> This is a primary button </Button>

И кнопкаВы можете выполнить проверку, используя те же самые константы this.props.variant === Variant.Primary

Нет реальной проблемы с производительностью при сравнении строк, это просто слабо типизированный способ перехода к тому же решению, и он выглядит немного более запутанным.Этот метод означает, что в нем нет места для ошибок, и очень ясно, какова цель.

Если вам нужно немного больше кода, чтобы понять, что я имею в виду, дайте мне знать

...