Расчет дополнительных реквизитов в стилизованном компоненте

Question

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

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 ничего не появляется?

Answer 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, чтобы избежать повторного рендеринга, например, чистых компонентов:)