Компонент withFallbackStyles — это высокоуровневый компонент (Higher-Order Component, HOC) в React, который добавляет стили по умолчанию для компонентов, когда стилизация на основе внешних условий недоступна или сложна для вычисления. Это полезно, когда элементы зависят от стилей, наследуемых из окружения (например, глобальные CSS-стили или стили родительских элементов), и необходимо установить базовые значения для таких параметров, как цвет текста или фона.
Основы использования withFallbackStyles
Компонент withFallbackStyles принимает два аргумента:
- Функция
mapNodeToProps: Эта функция отвечает за вычисление и передачу значений стилей по умолчанию. Она принимает два параметра:node(DOM-узел компонента) иownProps(собственные пропсы компонента). На основеnodeможно извлечь текущие стили и передать их как fallback-значения. - Компонент: Сам компонент, который будет использовать fallback-стили, если заданные стили не применимы.
Пример использования withFallbackStyles
В следующем примере мы создадим компонент с кнопкой и используем withFallbackStyles для установки цвета фона и цвета текста по умолчанию. Мы извлечем стили кнопки и применим их как запасные, отображая их в описании.
import { withFallbackStyles, Button } from '@wordpress/components';
const { getComputedStyle } = window;
const MyComponentWithFallbackStyles = withFallbackStyles(
(node, ownProps) => {
const buttonNode = node.querySelector('button');
return {
fallbackBackgroundColor: getComputedStyle(buttonNode).backgroundColor,
fallbackTextColor: getComputedStyle(buttonNode).color,
};
}
)(({ fallbackTextColor, fallbackBackgroundColor }) => (
<div style={{ padding: '10px', border: '1px solid #ccc' }}>
<Button variant="primary">Моя кнопка</Button>
<div>Цвет текста по умолчанию: {fallbackTextColor}</div>
<div>Цвет фона по умолчанию: {fallbackBackgroundColor}</div>
</div>
));
Разбор параметров
mapNodeToProps: Функция, которая вычисляет стили по умолчанию, используя глобальный методgetComputedStyle. Эта функция ищет узел кнопки и возвращает объект с цветом фона (backgroundColor) и цветом текста (color) в виде запасных значений.fallbackTextColorиfallbackBackgroundColor: Эти значения передаются в компонент и используются для отображения информации о fallback-стилях.
Детализированный пример
Допустим, мы хотим создать компонент, который меняет цвет текста и фона кнопки при наведении, и также отображает цвета по умолчанию в блоке информации ниже кнопки.
import { useState } from 'react';
import { withFallbackStyles, Button } from '@wordpress/components';
const { getComputedStyle } = window;
const HoverButtonWithFallbackStyles = withFallbackStyles(
(node) => {
const buttonNode = node.querySelector('button');
return {
fallbackBackgroundColor: getComputedStyle(buttonNode).backgroundColor,
fallbackTextColor: getComputedStyle(buttonNode).color,
};
}
)(({ fallbackTextColor, fallbackBackgroundColor }) => {
const [isHovered, setIsHovered] = useState(false);
const buttonStyles = isHovered
? { backgroundColor: 'darkblue', color: 'white' }
: { backgroundColor: fallbackBackgroundColor, color: fallbackTextColor };
return (
<div style={{ padding: '10px', border: '1px solid #ccc' }}>
<Button
style={buttonStyles}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
Наведи на меня
</Button>
<div>Цвет текста по умолчанию: {fallbackTextColor}</div>
<div>Цвет фона по умолчанию: {fallbackBackgroundColor}</div>
</div>
);
});
Объяснение работы примера
- Состояние
isHovered: При наведении на кнопкуisHoveredстановитсяtrue, изменяя цвет фона и текста кнопки. - Использование fallback-стилей: Когда кнопка не в фокусе,
fallbackBackgroundColorиfallbackTextColorиспользуются как стандартные цвета, показывая, как можно задать запасные стили.
Пример с использованием пропсов
Допустим, мы хотим передать цветовые значения в компонент через пропсы, но с fallback-значениями на случай, если они не указаны.
const CustomButtonWithFallbackStyles = withFallbackStyles(
(node, { customTextColor, customBackgroundColor }) => {
const buttonNode = node.querySelector('button');
return {
fallbackBackgroundColor: customBackgroundColor || getComputedStyle(buttonNode).backgroundColor,
fallbackTextColor: customTextColor || getComputedStyle(buttonNode).color,
};
}
)(({ fallbackTextColor, fallbackBackgroundColor }) => (
<div style={{ padding: '10px', border: '1px solid #ccc' }}>
<Button
style={{
color: fallbackTextColor,
backgroundColor: fallbackBackgroundColor,
}}
>
Кастомизированная кнопка
</Button>
<div>Цвет текста по умолчанию: {fallbackTextColor}</div>
<div>Цвет фона по умолчанию: {fallbackBackgroundColor}</div>
</div>
));
// Пример использования компонента с пропсами:
<CustomButtonWithFallbackStyles customTextColor="purple" customBackgroundColor="yellow" />
Важные рекомендации
- Осторожное использование
getComputedStyle: ПосколькуgetComputedStyleобращается к реальным DOM-элементам, его применение может негативно сказаться на производительности при множественных вызовах. Поэтому используйте его только при необходимости. - Управление стилями на разных уровнях:
withFallbackStylesудобен, когда вам необходимо, чтобы компонент мог подстраиваться под стили родительского окружения, не зная их заранее. - Добавление пользовательских стилей с
ownProps: В компонент можно передать пользовательские пропсы для установки предпочтительных значений стилей. Это повышает гибкость компонента.
Заключение
Компонент withFallbackStyles — мощный инструмент, когда нужно создать адаптивные элементы интерфейса, которые будут корректно отображаться даже в нестандартных условиях стилизации. Он особенно полезен в случае, когда стили определяются динамически или зависят от темы WordPress.