模板文字中的多次评估...如何改进样式组件的填充计算？

Question

我正在尝试使用样式化组件来为按钮添加一些填充样式，如下所示。是否有更简洁的方法使用单个表达式返回两个值以便我可以清理它？

export const Button = styled.button`
  padding: ${props => (props.primary ? rhythm(0.65) : rhythm(0.5))} ${props => (props.primary ? rhythm(1.6) : rhythm(1))};
`

此外，Prettier 将之前的代码格式化如下。这是无效的 css，因此不起作用。这是 prettier 中的错误还是我的代码太糟糕了？

损坏：

export const Button = styled.button`
  padding: ${props => (props.primary ? rhythm(0.65) : rhythm(0.5))}
    ${props => (props.primary ? rhythm(1.6) : rhythm(1))};
`

Answer 1

您可以使用一个模板字符串生成两个值。创建一个生成字符串的简单函数会更具可读性：

const rhythm = v => `${v}em`; // mock

const getPadding = (a, b) => `${rhythm(a)} ${rhythm(b)}`

const Button = styled.button`
  padding: ${props => (props.primary ? getPadding(0.65, 1.6) : getPadding(0.5, 1))};
`

ReactDOM.render(
  <div>
    <Button primary>Primary</Button>
    <Button>Not primary</Button>
  </div>,
  root
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/4.4.0/styled-components.js"></script>

<div id="root"></div>

模板文字中的多次评估...如何改进样式组件的填充计算？

Multiple evaluations in template literal... How can I improve my padding calculation for styled-components?

javascript

reactjs

styled-components

prettier