Как объявить селектор атрибутов типа S CSS <length>с помощью свойства REACT - PullRequest
Новая
       111

Как объявить селектор атрибутов типа S CSS <length>с помощью свойства REACT

1 голос
/ 29 мая 2020

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

SomewhereElse.tsx 

...
<FooComponent width={200}>
...

FooComponent .tsx 

interface IFooProps {
  //default width of 150px
  width?: 150;
  //default margin of 5px
  margin?: 5;
}

interface IFooState{
  checked: boolean;
}

class FooComponent extends Component<IFooProps, IFooState> {
    constructor(props: IFooProps) {
        super(props);
        ...
    }

...

    render(): ReactElement {
        return (
          <div className="foo-component"
              data-width={this.props.width + 'px'}
          >
          ...

FooComponent.s css

.foo-component {
    ...
    width: attr(data-width length);
    ...

Но при запуске приложения всегда выдает следующую ошибку (chrome):

errorinchrome

... Учтите, что мне нужно "число" в качестве свойства, потому что я делаю некоторые вычисления на основе этого числа для некоторых внутренних компонентов, чтобы все соответствовало друг другу.

EDIT:

Использование «стиля» не работает для меня, потому что у меня есть некоторые функции :: before :: after в мои s css, которые не работают при использовании стиля, потому что они иногда изменяют "right:" в зависимости от ширины.

Для лучшего понимания это моя база: https://www.sitepoint.com/react-toggle-switch-reusable-component/

Ответы [ 4 ]

2 голосов
/ 04 июня 2020

Чтобы ответить на ваш вопрос

Пожалуйста, найдите решение с помощью селектора атрибутов или сообщите мне, что это невозможно из-за X причин (ссылка на документы в лучшем случае).

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

MDN около CSS attr():

Примечание: функцию attr () можно использовать с любым свойством CSS, но поддержка свойств, отличных от содержимого, является экспериментальной, а поддержка параметра type-or-unit ограничена.

Согласно caniuse.com о css3-attr , возможность использовать attr() на любом свойстве CSS (кроме content, и использовать его для нестроковых значения (например, числа, цвета) через <type_or_unit>, как определено в «CSS Уровнях значений и единиц измерения 3», в настоящее время не поддерживается всеми браузерами .

См. также заявление о текущем черновик для «CSS Модуль значений и единиц, уровень 4»:

Следующий f элементы подвержены риску и могут быть исключены в течение периода CR: toggle(), attr() [...]

(Источник: https://drafts.csswg.org/css-values/#status)

В выпуске Chromium я нашел ссылку на интересный ресурс, о котором я не знал: панель инструментов веб-платформенных тестов для css-values. Взгляните на (неудачные) тесты с префиксом attr-, особенно attr-length-valid.html и attr-px-valid.html.

Но есть надежда: команда Chromium недавно (15.05.2020) опубликовала Намерение реализовать и отправить: CSS расширенная функция attr ()

Реализовать расширение attr (), указанное в CSS уровне 4, а именно, позволяя различные типы (кроме) и использование во всех свойствах CSS (кроме псевдоэлемента content).

Примечание: CSS Уровень 4 внес существенные изменения в attr () по сравнению с уровнем 3, чтобы упростить реализацию. Мы будем следовать CSS4. [...]

Мотивация: Это очень востребованная функция, 77 звезд на crbug.com/246571. [...]

Отслеживание Chromium Проблема 246571: Реализовать атрибут CSS3 / ссылки attr )

Firefox также показать недавние активность, см. Firefox отслеживание Ошибка 435426 [мета] Реализовать CSS Значения 3 расширения для attr () , по крайней мере, они относятся к текущим усилиям Chromium.

(WebKit Ошибка 26609 - Поддержка функции CSS3 attr () не показывает активности, что может быть нарушением сделки)

1 голос
/ 02 июня 2020

Как было предложено G-Cyrillus, я нашел возможное решение, используя CSS настраиваемые свойства. К сожалению, я не нашел решения с использованием селектора атрибутов, поэтому я мог придерживаться одного типа решения.

Добавьте свои настраиваемые свойства в «родительский» класс файла s css, например: 

.foo-component {
    --customwidth: 150px;
    --custommargin: 5px;

    width: var(--customwidth, 150px);
    ...
    &-inner {
        margin-left: var(--custommargin, 5px);
    }
    ...
}

После того, как вы объявили настраиваемое свойство, его можно использовать с var(<propertyname>, <initialvalue>).

В React вы можете немного изменить render(), например: 

 render(): ReactElement {
    //set the custom properties for width, margin and slider position
    let cssProperties = {};
    cssProperties['--customwidth'] = this.props.width == null ? '150px' : this.props.width + 'px';
    cssProperties['--custommargin'] = this.props.margin == null ? '150px' : this.props.margin + 'px';
    cssProperties['--switchposition'] = (this.props.width == null ? 115 : this.props.width - 35) + 'px';

    return (
      <div className="foo-component" style={cssProperties}>
      ...
}

, что будет работать для каждого компонента отдельно.

0 голосов
/ 02 июня 2020

С помощью attr вам необходимо указать атрибут, указав селектор в ваших стилях s css 

.foo-component[data-width] {
    ...
    width: attr(data-width length);
    ...

Если у вас несколько таких атрибутов, вы можете написать их как 

.foo-component[data-width][data-margin] {
    ...
    width: attr(data-width length);
    margin: attr(data-margin number);
    ...

Пожалуйста, проверьте MDN docs для получения более подробной информации

0 голосов
/ 29 мая 2020

Более простой способ - использовать встроенный стиль: 

       return (
          <div className="foo-component"
              style=`width:${this.props.width};`
          >
...