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

Posted 2023-02-22

【中文标题】Styled-Components 的 .attrs() 函数的用例是啥？

【英文标题】：What is the use case of Styled-Components' .attrs() function?Styled-Components 的 .attrs() 函数的用例是什么？

【发布时间】：2019-10-16 03:23:36

【问题描述】：

我遇到了.attrs() function in styled components，但我不明白它的作用，或者它的作用有什么不同？

我试图理解他们文档中的示例，但就我而言，没有attrs() 函数我可以做同样的事情。

谁能给我解释一下或者举个简单的例子？

【参考方案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 属性。它来自您的属性构造函数（静态）

否则，您无法在样式规则中执行此操作，因为这些只是您的 CSS 属性的字符串文字。

它使您不必在每次使用时都写type='password'

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

奖金：

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

多田！

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

您的type 现在是动态的，即它将接受您从组件使用中指定的任何输入type prop，并将输入呈现为该类型（文本、密码、文件等）或者如果你跳过 type 属性，它会选择默认的 password。您可以在上面使用尽可能多的条件逻辑。

例子：

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

希望能回答你的问题。

【参考方案2】：

.attrs 的目标是让它可以从你的道具中传递下来。 所以你可以在你的样式中使用道具，你可以创建占位符，或者根据道具改变颜色等......

例如：

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

【讨论】：

感谢您的回答。所以attrs()主要是针对html属性的，跟CSS没关系吧？还是我误会了？

这两种情况都可以使用。例如，您可以使用您的道具使用 HTML 属性“活动”，您可以说“如果我单击此制表菜单将活动类添加到我的 html”。或者您可以使用 attrs 在您的 CSS 中添加三元组，例如您可以说“如果您有超过 20 票，请将文本涂成绿色”，这就是 CSS :)

【参考方案3】：

另一个有趣的用途是代码组织。 Styled-components 仅适用于 style 道具，但许多自定义组件不公开此道具。相反，它们提供了一个 *Style 道具，该道具被传递给子组件 style 道具。

例如react-native-material-textfield 有 5 种风格的道具。

我们使用attrs 函数将样式组织与其他样式组件保存在一个文件中。

这不允许对伪组件使用传统的 css 语法，但这是我们能想到的最好的方式来保持所有样式井井有条。

【参考方案4】：

目标是仅向特定样式的组件添加新的道具/修改输入道具（作为 HoC）。

请注意：

从 styled-components v4 开始，withComponent API 成为候选 弃用。很有可能，您可能想使用新的 "as" 属性来简单地切换要渲染的元素/组件，因为 withComponent API 对样式具有破坏性，如果 最低包装的组件是 StyledComponent。

【参考方案5】：

来自documentation：

什么时候使用 attrs？

您可以使用 attrs 将属性传递给样式化组件，但它是 这样做并不总是明智的。

经验法则是当你想要一个 样式化的组件具有该道具，并在每个 实例需要一个不同的：

const PasswordInput = styled.input.attrs(props => (
  // Every <PasswordInput /> should be type="password"
  type: "password"
))``

// This specific one is hidden, so let's set aria-hidden
<PasswordInput aria-hidden="true" />
const PasswordInput = styled.input.attrs(props => (
  // Every <PasswordInput /> should be type="password"
  type: "password"
))``
// This specific one is hidden, so let's set aria-hidden
<PasswordInput aria-hidden="true" />

同样适用于可以根据“模式”推断的道具 另一个道具。在这种情况下，您可以将 attrs 上的属性设置为 根据其他道具计算该道具的函数。