Расчет дополнительных реквизитов в стилизованном компоненте
У меня есть довольно простой стилизованный компонент, но я хочу использовать реквизиты для расчета некоторых дополнительных реквизитов для использования в интерполяциях позже. Я понимаю, что мог бы выполнять вычисления внутри выражений, но это означало бы повторение их несколько раз. Вот мой код.
const StyledColumns = styled.div.attrs({
columnWidths: props => calculateColumnWidths(props)
})`
display: grid;
grid-column-gap: 40px;
grid-row-gap: 20px;
grid-template-columns: ${props => props.columnWidths[0]}
// Use props.columnWidths a few more times...
`
Здесь есть две проблемы: (A) я получаю сообщение об ошибке, говорящее о том, что символы верхнего регистра не могут использоваться в именах атрибутов, и (B) это заставило меня понять, что атрибуты на самом деле добавляются в DOM в div. Я думал, что это просто удобный способ рассчитать дополнительные реквизиты.
Есть ли лучший способ сделать это, чтобы мне нужно было выполнить вычисления только один раз, но в визуализируемом DOM ничего не появилось?
Ответы 1
Я бы предложил обернуть ваш стилизованный компонент в HOC, чтобы выполнить расчет там.
const StylisedColumn = React.memo(props => {
const columnWidths = calculateColumnWidths(props);
const Column = styled.div`
display: grid;
grid-column-gap: 40px;
grid-row-gap: 20px;
grid-template-columns: ${columnWidths[0]}
// Use columnWidths a few more times...
`;
return <Column {...props} />;
});
используйте React.memo, чтобы избежать повторного рендеринга, как чистые компоненты :)