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

Question

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

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

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

Answer 1

目标是仅向特定样式组件添加新的 props/modify 输入属性（作为 HoC）。

请注意：

As of styled-components v4 the withComponent API is now a candidate for deprecation. In all likelihood, you probably want to use the new "as" prop to simply switch what element/component being rendered since the withComponent API is destructive toward styles if the lowest-wrapped component is a StyledComponent.

Answer 2

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

例如：

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

Answer 3

注重命名很重要

顾名思义，样式化组件用于设置原生 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' ... />

奖金:

现在，这是一个具有 type 密码属性的特定 input 组件。如果您希望拥有一个具有任何 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" .../>

希望这能回答您的问题。

Answer 4

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

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

我们使用 attrs 功能将样式组织与其余样式组件保存在一个文件中。

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

Answer 5

来自documentation：

When to use attrs?

You can pass in attributes to styled components using attrs, but it is not always sensible to do so.

The rule of thumb is to use attrs when you want every instance of a styled component to have that prop, and pass props directly when every instance needs a different one:

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" />

The same goes for props that can be inferred based on the "mode" of another prop. In this case you can set a property on attrs to a function that computes that prop based on other props.

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

What is the use case of Styled-Components' .attrs() function?

html

javascript

reactjs

styled-components

When to use attrs?