javascript - 我什么时候使用 attrs 与直接通过样式组件传递道具？

Question

对于何时应该使用 attrs 构造函数在 styled-components 中传递 props，我有点困惑：

const Example = styled.div.attrs(props => ({
  style: {
    color: props.color
  }
}))``;

当我应该直接通过它们时：

const Example = styled.div`
    color: ${props => props.color}
`

我知道第一种方法是更改内联样式，第二种方法是生成一个类，但我不确定这些差异的含义。

我在控制台中看到一个错误，上面写着“为组件 styled.div 生成了超过 200 个类。考虑使用该attrs方法以及用于频繁更改样式的样式对象。”

但同时它在文档中说“经验法则是，当您希望样式组件的每个实例都具有该道具时使用 attrs，并在每个实例需要不同的道具时直接传递道具。”

为什么不一直使用其中一种方法呢？我应该什么时候使用每一个，为什么？

score 12 · Accepted Answer

（TL；最后是 DR）

问题是您正在阅读两个不同的用例，并假设它们解释的是同一件事。

Styled Components.attrs方法用于将 props 传递给样式化组件。当文档说您应该使用.attrs“当您希望样式化组件的每个实例都具有该道具时”时，它们的意思是这样的：

const CheckboxInput = styled.input.attrs({ type: "checkbox" })`
   margin: 10px;
`;

这意味着当你使用时<CheckboxInput />，它会默认是一个复选框，不需要type="checkbox"每次都定义这个道具。这是该.attrs方法的主要目的。

所以你明白，当你添加style到该组件的时，它与作为一个 prop 传递给一个常规的、非样式化的组件attrs完全相同。style它只是将该样式添加为内联样式，跳过样式组件可能进行的任何优化。通常不推荐内联样式，因为它们总是作为单独的样式附加到该组件的每个版本。例子：

// items is some array with 100 elements
items.map(item => (
  <button style={{ background: 'blue' }} >{item.text}</button>
));

这将生成 100 个按钮，每个按钮都有自己的background: blue样式实例。

使用样式化组件，您可以这样做：

const button = styled.button`
   background: blue;
`;

无论您有多少按钮，这只会生成一次样式。因为它实际上生成了一个 CSS 类。

不幸的是，生成 CSS 类并不是一个轻量级的操作，所以如果你正在做动画或做任何经常改变样式的事情，建议使用内联样式。

TL;博士：

1 回答 1