Styled-Components的.attrs（）函数的用例是什么？

Question

我碰到了.attrs() function in styled components，但是我不明白它的作用还是不同的作用？我只是不了解它的用例-如果没有它，您将能做什么？

我试图理解他们文档中的示例，但是就我而言，我可以在没有attrs（）函数的情况下做完全相同的事情。

有人可以向我解释一下还是举一个简单的例子？不胜感激。

Answer 1

另一个有趣的用途是代码组织。 样式化组件仅可与style道具一起使用，但是许多自定义组件不会公开该道具。相反，他们提供了一个*Style道具，该道具将传递给子组件style道具。

例如react-native-material-textfield有5种样式道具。

我们使用attrs函数将样式的组织与其余样式化的组件保持在一个文件中。

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

Answer 2

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

请注意：

  

从样式组件v4开始，withComponent API现在是候选对象   弃用。您很可能希望使用新的   “ as”道具可以简单地切换要渲染的元素/组件   如果withComponent API对样式具有破坏性，   包装最少的组件是StyledComponent。

Answer 3

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

例如：

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

Answer 4

关注命名非常重要。

顾名思义，

样式化的组件用于样式化本机DOM元素或自定义组件。

attrs，如果要在attrs构造函数中提及相同DOM元素的属性，甚至不需要在实际组件中提及

上面那行的意思是

 <Input placeholder="A small text input" size="1em" 

没有type属性。它来自您的属性构造函数（静态）

否则您就无法在样式规则中完成此操作，因为它们只是CSS属性的字符串文字。

您会注意到，使用

时，它免除了编写type='password'的麻烦

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

现在，这是具有密码输入类型的特定组件。如果希望，可以通过将input属性设置为类似的形式来使用通用的type

const Input = styled.input.attrs(({ size, type }) => ({

  type:  type || "password",
  ...

您的type现在是动态的，即它将采用您从组件使用中指定的任何输入类型prop并将输入呈现为该类型（文本，密码，文件等），或者仅将{{1 }}默认情况下输入。您可以在那里使用任意数量的条件逻辑。

希望能回答您的问题。

Answer 5

来自documentation：

何时使用attrs？

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

经验法则是，当您需要atr的每个实例时，请使用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上的属性设置为 用于根据其他道具计算该道具的功能。