this.props.childrenと反応して構成コンポーネントを作成する

投稿日: 2022-04-20 2022-10-09
タグ: React

あなたがReactの初心者なら、あなたは見たことがあるかもしれません this.props.children さまざまなチュートリアルで。その目的が明確でない場合や、「別の方法で行うことができた」と思われる場合があります。使用のユニークな特典を見つけましょう children Reactで使用することで、いつ使用すべきかについてより自信を持てるようになります。

基本的な使用法

を構築する必要があると想像してください <PrimaryButton/> アプリ内のすべての召喚ボタンのコンポーネント。

class PrimaryButton extends React.Component {
  render() {
    return (
      <button onClick={this.props.onClick}>
        {this.props.text}
      </button>
    )
  }
}

//usage
<PrimaryButton text="Getting Started" onClick={this.somehandler} />

デザインチームは、「はじめに」という言葉の前にアイコンを含めるという小さな機能を追加したいと考えています。ここで物事が面白くなります…

//refactor
class PrimaryButton extends React.Component {
  render() {
    return (
      <button onClick={this.props.onClick}>
        {this.props.icon}{this.props.text}
      </button>
    )
  }
}

//usage
<PrimaryButton
  icon={IconFile}
  text="Getting Started"
  onClick={this.somehandler}
/>

このソリューションは確かに合理的ですが、はタイトなインターフェイスを作成します <PrimaryButton/> ボタンの内容を明確にする必要があるためです。これにより、新しい機能を導入する必要があるときに簡単に破損する脆弱なコンポーネントが発生する可能性があります。しかし、ああ！より堅牢なソリューションがあります！

//refactor
class PrimaryButton extends React.Component {
  render() {
    return (
      <!--
      <button onClick={this.props.onClick}>
        {this.props.icon}{this.props.text}
      </button>
      -->
      <button onClick={this.props.onClick}>
        {this.props.children}
      </button>
    )
  }
}

//usage
<PrimaryButton onClick={this.somehandler}>
  <IconFile/> Getting Started
</PrimaryButton>

ピニオン化されていないことに注意してください <PrimaryButton/> その内容についてです！そこに有効なHTMLタグ、画像ファイル、Reactコンポーネントなどを配置できます。たとえば、テキストとアイコンの順序を逆にすることもできます。

しかし、この奇妙なことは何ですか this.props.children?

this.props.weird

私が最初にReactを使い始めたとき、採用を妨げる最大の抑止力の1つです。 this.props.children それが使われている奇妙な方法のためでした。 Reactコンポーネントを他のReactコンポーネントの周りにラップしますか？これらすべてのコンポーネントが暗黙的に親に渡されると仮定しますか？で予約された名前空間を使用する props …「子供」にアクセスするには？超奇妙。

しかし、JSXが最初にどれほど奇妙であったかと同じように、 this.props.children もっと構文に慣れてください…JSXと同じくらい不可欠になります！親子関係を使用する場所を特定することは、あなたにとってより直感的になります。

children は、 onClick onChange keyやstyleなどの属性を介して渡されない唯一の小道具です。むしろ、Reactコンポーネント（「親」コンポーネントと見なされます）でラップすると、暗黙的に渡されます。「親」と「子」の言語は、親と子のDOMノードがあるHTMLからのものです。

まとめ

現実の世界では、Reactアプリには、これらのラッパーコンポーネント（より洗練されたReactコンポーネントをより単純なコンポーネントから構成するため、Reactチームはそれらを構成コンポーネントと呼びます）と、そうでないコンポーネントがブレンドされます。 tすべてのReactコンポーネントをラップします（私の最初のコードスニペットを参照してください）。それは完全に正常です。製品について詳しく知ると、構成コンポーネントに変換できる冗長なUI/UXを特定できるようになります。

たとえば、コンポジションコンポーネントにリファクタリングするのに適した候補には、モーダル、ホバリング/クリックスタイリング、通知スナックバー、デッキスライダーなどがあります。この構成スタイルを厳密にするか緩めるかは、実際にはあなたの裁量に任されています。 Reactコンポーネントがその中の任意のコンテンツと、アプリ全体で使用されるUI機能の一般的な分母に依存するほど、この親子パターンを使用することでより多くのメリットが得られます。

👉Codepenのデモをチェックしてください。さまざまな構成コンポーネントを使用して、高度な機能が段階的に階層化されていることに注目してください。

getdocs

13036