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避免重新渲染，例如纯组件：）

计算样式化组件中的其他道具

1 个答案: