时间戳

首页 > 解决方案 > Styled-Components 的 .attrs() 函数的用例是什么？

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

问题描述

.attrs()我在样式化组件中遇到了该功能，但我不明白它的作用，或者它的不同之处？

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

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

标签： javascripthtmlreactjsstyled-components

解决方案

专注于命名非常重要。

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

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

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

 <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道具。它来自您的属性构造函数（静态）

你不可能在你的样式规则中这样做，因为这些只是你的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" .../>

希望这能回答你的问题。

推荐阅读