スタイル化されたコンポーネント '.attrs（）関数のユースケースは何ですか？

Question

私は .attrs() [Function（）] _機能を越えていました / /は、それが何をしているのか理解していません。 異なる =？

私は彼らのドキュメントの例を理解しようとしましたが、私が心配している限りでは、attrs()関数なしでまったく同じことをすることができます。

誰かがこれを私にこれを説明したり、簡単な例を与えてもらえますか？

Answer 1

から ドキュメント ：

Attrsを使うときは？

Attrsを使用してスタイル化されたコンポーネントに属性を渡すことができますが、必ずしもそうすることは賢明ではありません。

Thumbのルールは、スタイル化されたコンポーネントのすべてのインスタンスをそのプロップを持つすべてのインスタンスが必要なときに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のプロパティを他の小道具に基づいてそのPROPを計算する機能に設定できます。

Answer 2

目標は、特定のスタイル化されたコンポーネントのみに（HOCとして）新しい小道具/変更入力小道具を追加することです。

注意してください：

Styled-Components V4の時点で、InterComponent APIは現在廃止予定の候補です。すべての可能性において、最低包装されたコンポーネントがスタイル付きコンポーネントである場合、Style Component APIがスタイルに破壊されているため、lement/componentがレンダリングされている要素/コンポーネントを切り替えるために、おそらく新しい "AS" PROPを使用したいと思うでしょう。