Реакция - Как избежать этого вида встроенного моделирования - PullRequest
Новая
       24

Реакция - Как избежать этого вида встроенного моделирования

5 голосов
/ 21 сентября 2019

В верхней части моего функционального компонента установлены эти значения, которые используются не только в стилях, и это меня беспокоит: 

const testWidth = 100;
const testHeight = 100;

Я использую некоторые из этих переменных в своих стилях ...

Я хотел бы переместить мои стили в другой файл, который будет содержать этот стиль и будет связан с каким-либо именем класса, например '. divWrapperStyle', но я не уверен, как я могу взаимодействовать с этой переменной'testWidth' 

<div
style={{
  borderBottom: 0,
  width: `${testWidth}px`,
  width: 'auto',
  paddingRight: 0,
  paddingLeft: 0,
  paddingTop: 20,
}}
>

Итак, я мог бы создать что-то во внешнем .scc файле, например так: 

.wrapper{
    borderBottom: 0,
    paddingRight: 0,
    paddingLeft: 0,
    paddingTop: 20,
 }

И я мог бы использовать что-то подобное после импорта этого файла:

 <div className="wrapper>

а как же ширина?Как я могу включить width с этим значением из testWidth variable ...?

Чтобы переменные, которые используются в CSS, были для меня проблематичными: /

Как с этим справиться?

Спасибо

Ответы [ 3 ]

3 голосов
/ 21 сентября 2019

Библиотека styled-components , вероятно, даст вам то, что вы хотите.

Чтобы достичь этого с помощью традиционного CSS, я бы порекомендовал вам отвлечься от мысли "как сделать"?Я передаю произвольные числовые значения моему css? », А не« каким вариантам стилей я хочу поддерживать? ».

Здесь у вас могут быть wrapper--mobile, wrapper--tablet, wrapper--desktop,или, может быть, просто одна модификация, как вариант wrapper--wide.(Я использую здесь обозначение BEM .)

Для этого второго подхода вы можете использовать медиа-запросы для вычислений измерений (мобильный или планшетный компьютер) и ваших истинных вычислений JavaScript с использованиембиблиотека типа clsx для генерации имени класса, которое передает вариант, который вам необходимо поддерживать в вашем CSS.

В зависимости от стека вашего браузера, вы можете использовать переменные css .Тем не менее, мыслительный процесс не «как передать произвольные числовые значения», а, скорее, «как объявить набор вариантов, которые мне нужно поддерживать в одном месте, так что мне нужно сделать это изменение только в одном местевнести коррективы в будущем ".

Дайте мне знать, если эти опции приблизят вас к тому, что вы хотите.

0 голосов
/ 21 сентября 2019

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

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

// my-styles.js
export default myStyle = {
  borderBottom: 0,
  width: `10px`,
  width: 'auto',
  paddingRight: 0,
  paddingLeft: 0,
  paddingTop: 20,
}

Используйте его следующим образом: 

// My Component.js
import {myStyle} from ... 

<div style={{...myStyle, width: `${testWidth}px`}}>
0 голосов
/ 21 сентября 2019

Почему бы вам просто не создать файл .JS, например: style.js и сделать следующее: 

const testWidth = 100;
const testHeight = 100;

export default const styles = {
   divWrapperStyle: {
     borderBottom: 0,
     width: testWidth, // use your variable here
     width: 'auto',
     paddingRight: 0,
     paddingLeft: 0,
     paddingTop: 20,
   }
}

, а затем в своем функциональном компоненте вы import делаете: 

import styles from '{pathToStyle.jsFile}';

и используйте его: 

<div style={styles.divWrapperStyle}>

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

...