计算样式组件中的附加道具

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避免重新渲染，就像纯组件一样:)

计算样式组件中的附加道具

Calculating additional props in styled component

reactjs

styled-components