Styled-Components 的 .attrs() 函数的用例是什么？

Question

我.attrs()在 styled components 中遇到了这个函数，但我不明白它的作用，或者它有什么不同？

我试图理解他们文档中的示例，但就我而言，我可以在没有该attrs()功能的情况下做完全相同的事情。

有人可以向我解释一下或举一个简单的例子吗？

Answer 1

注重命名非常重要。

顾名思义，样式化组件用于设置原生 DOM 元素或自定义组件的样式。

attrs用于在attrs构造函数中提及相同 DOM 元素的属性，而无需在实际组件调用中提及它。

上面那行的意思是你可以做

 <Input placeholder="A small text input" />

和

const Input = styled.input.attrs(({ type }) => ({
  type:  type || "password"
}))`
  align-items: center;
  display: flex;
  margin: 1.5vh 0;
`

看到组件使用<Input .../>在type任何地方都没有prop。它来自你的属性构造函数（静态）

你不可能在你的样式规则中这样做，因为这些只是你的CSS属性的字符串文字。

它使您免于编写type='password'每次使用

<Input type='password' ... />

奖金：

现在，这是一个input具有type密码属性的特定组件。如果您希望拥有input具有任何type属性值的通用（样式化组件）怎么办？

多田！

const Input = styled.input.attrs(({ type }) => ({
  
  type:  type || "password",
  ...

您type现在是动态的，即它将采用您从组件使用中指定的任何输入type 道具并将输入呈现为该类型（文本、密码、文件等），或者如果您跳过类型道具，它将选择默认的password. 您可以根据需要使用尽可能多的条件逻辑。

例子：

<Input .../> // renders type="password"
<Input type="text" .../>
<Input type="email" .../>

希望这能回答你的问题。

Answer 2

.attrs 的目标是它可以从你的 props 传递下来。因此，您可以在样式中使用道具，并且可以创建占位符，或根据道具更改颜色等......

例如 ：

const InputText = styled.input.attrs({
  type: 'text',
  placeholder: props => props.placeholder || 'Please fill',
})`
  padding: 6px 12px; 
`;